/* ---------- Education: Lead generation (/education/lead-generation). Classes start with edlg-.
   Motion in src/js/edu-leadgen.js. The app look-alikes (phone screens) stay light in both themes, like
   screenshots, and carry no official platform logos: platforms are named, with self-drawn generic glyphs
   (short video, long video, photo, group) and a site colour each. Animations use transform and opacity only,
   run only while on screen, and are absent without html.motion: then every mock shows its final frame. */
:root { --edlg-tt: #12a399; --edlg-yt: #e5484d; --edlg-ig: #a659e0; --edlg-fb: #3b7be6; }
.edlg-hero [data-p="tt"], .edlg [data-p="tt"] { --c: var(--edlg-tt); }
.edlg-hero [data-p="yt"], .edlg [data-p="yt"] { --c: var(--edlg-yt); }
.edlg-hero [data-p="ig"], .edlg [data-p="ig"] { --c: var(--edlg-ig); }
.edlg-hero [data-p="fb"], .edlg [data-p="fb"] { --c: var(--edlg-fb); }
.edlg [data-p="all"] { --c: var(--gold-2); }
.edlg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.edlg-note { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font: 500 12.5px/1.4 var(--font-body); color: var(--muted); }
.edlg-note--c { justify-content: center; text-align: center; }
/* Platform chip: tinted pill with the platform's glyph (or a dot). */
.edlg-pc { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 4px 7px; border-radius: 7px; background: color-mix(in srgb, var(--c, var(--chip)) 16%, var(--panel)); color: var(--ink); font: 600 12px/1.15 var(--font-body); white-space: nowrap; }
.edlg-pc svg { width: 14px; height: 14px; flex: none; color: var(--c); }
.edlg-pc:not(:has(svg))::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.edlg-av { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #f7e1a6, #d4a648); color: #4a2d06; font: 700 11px/1 var(--font-body); letter-spacing: 0.02em; }

/* ---------- Hero */
.edlg-hero .display em { font-style: normal; color: #b23c0a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .edlg-hero .display em { color: var(--sun); } }
:root[data-theme="dark"] .edlg-hero .display em { color: var(--sun); }
.edlg-hero__plats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.edlg-hero__plats li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px 8px 10px; border-radius: 9999px; background: color-mix(in srgb, var(--panel) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line-2); font: 600 14px/1 var(--font-body); color: var(--ink); }
.edlg-hero__plats svg { width: 17px; height: 17px; color: var(--c); }

.edlg-hv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.edlg-hv__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 250px); column-gap: 44px; align-items: center; padding: clamp(18px, 2.4vw, 30px); border-radius: 24px; isolation: isolate;
  background: radial-gradient(70% 55% at 75% 0%, rgba(212, 166, 72, 0.18), transparent 72%), var(--panel); box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(22, 24, 29, 0.16); }
:root[data-theme="light"] .edlg-hv__stage { box-shadow: 0 0 0 1px rgba(140, 100, 30, 0.12), 0 24px 60px rgba(110, 80, 10, 0.16); }
.edlg-hv__src { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.edlg-hv__src > li { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; padding: 11px 12px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.edlg-hv__src > li::after { content: ""; position: absolute; inset: -3px; border-radius: 17px; box-shadow: 0 0 0 2px var(--c), 0 0 22px color-mix(in srgb, var(--c) 55%, transparent); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.edlg-hv__src > li.is-on::after { opacity: 1; }
.edlg-hv__g { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--c) 18%, var(--panel)); color: var(--c); }
.edlg-hv__g svg { width: 21px; height: 21px; }
.edlg-hv__src b { display: block; font: 700 14.5px/1.2 var(--font-body); color: var(--ink); }
.edlg-hv__src li > span:nth-child(2) > span { display: block; margin-top: 2px; font: 500 12.5px/1.3 var(--font-body); color: var(--muted); }
/* Lane from each tile to the phone: a dashed line across the column gap, with a dot that travels it. */
.edlg-hv__lane { position: absolute; left: 100%; top: 50%; width: 44px; height: 0; border-top: 1.5px dashed var(--line-2); text-decoration: none; pointer-events: none; }
.edlg-hv__lane::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); opacity: 0; }
html.motion .edlg-hv__src li.is-go .edlg-hv__lane::before { animation: edlg-lane 0.8s cubic-bezier(.4, 0, .4, 1) forwards; }
@keyframes edlg-lane { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(36px); } }

.edlg-hv__phone { position: relative; padding: 8px; border-radius: 36px; background: #16181d; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 20px 44px rgba(0, 0, 0, 0.28); }
.edlg-hv__scr { position: relative; display: flex; flex-direction: column; gap: 8px; aspect-ratio: 9 / 18.4; overflow: hidden; padding: 30px 10px 10px; border-radius: 28px; background: #f3f4f6; color: #16181d; font-family: var(--font-body); }
.edlg-hv__scr::before { content: ""; position: absolute; top: 9px; left: 50%; width: 64px; height: 17px; margin-left: -32px; border-radius: 9999px; background: #16181d; }
.edlg-hv__top { display: flex; align-items: center; gap: 9px; padding: 2px 4px 6px; }
.edlg-hv__top b { display: block; font: 700 14px/1.15 var(--font-body); }
.edlg-hv__top > span:nth-child(2) > span { font: 500 11.5px/1.2 var(--font-body); color: #5b616b; }
.edlg-hv__top i { margin-left: auto; padding: 4px 8px; border-radius: 9999px; background: #e6f6ea; color: #0d7f37; font: 700 10.5px/1 var(--font-body); font-style: normal; }
.edlg-hv__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.edlg-hv__list li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; row-gap: 1px; padding: 8px 9px 9px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(22, 24, 29, 0.06), 0 0 0 1px rgba(22, 24, 29, 0.05); transition: opacity 0.45s cubic-bezier(.2, .7, .2, 1), transform 0.45s cubic-bezier(.2, .7, .2, 1), box-shadow 0.3s; }
.edlg-hv__tag { grid-column: 1; grid-row: 1; justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; padding: 3px 6px 3px 5px; border-radius: 6px; background: color-mix(in srgb, var(--c) 15%, #fff); color: #1f2329; font: 700 10px/1 var(--font-body); }
.edlg-hv__tag svg { width: 11px; height: 11px; color: var(--c); }
.edlg-hv__list b { grid-column: 1 / -1; font: 700 12.5px/1.25 var(--font-body); color: #16181d; }
.edlg-hv__list li > span:not(.edlg-hv__tag) { grid-column: 1 / -1; font: 500 11.5px/1.3 var(--font-body); color: #5b616b; }
.edlg-st { grid-column: 2; grid-row: 1; align-self: start; padding: 4px 7px; border-radius: 9999px; font: 700 10px/1 var(--font-body); font-style: normal; white-space: nowrap; }
.edlg-st--new { background: #eef0f3; color: #4b505a; }
.edlg-st--rep { background: #e0f5f3; color: #087570; }
.edlg-st--ok { background: #e6f6ea; color: #0d7f37; }
.edlg-st--pre { display: none; }
.edlg-hv__list li.edlg-hv__last { box-shadow: 0 0 0 1.5px #0d7f37, 0 8px 18px rgba(13, 127, 55, 0.14); }
.edlg-hv__wa { margin-top: auto; display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 12px; background: #e6f6ea; color: #0d7f37; font: 600 11.5px/1.2 var(--font-body); transition: opacity 0.4s; }
.edlg-hv__wa .psg-ic { font-size: 15px; flex: none; }
/* Running (JS adds .is-anim): items appear as data-n counts up; the last flips to Trial booked. */
.edlg-hv__stage.is-anim .edlg-hv__list li { opacity: 0; transform: translateY(14px) scale(0.97); }
.edlg-hv__stage.is-anim[data-n="1"] .edlg-hv__list li:nth-child(1),
.edlg-hv__stage.is-anim[data-n="2"] .edlg-hv__list li:nth-child(-n+2),
.edlg-hv__stage.is-anim[data-n="3"] .edlg-hv__list li:nth-child(-n+3),
.edlg-hv__stage.is-anim[data-n="4"] .edlg-hv__list li { opacity: 1; transform: none; }
.edlg-hv__stage.is-anim:not(.is-booked) .edlg-st--pre { display: inline-block; }
.edlg-hv__stage.is-anim:not(.is-booked) .edlg-st--post { display: none; }
.edlg-hv__stage.is-anim:not(.is-booked) .edlg-hv__last { box-shadow: 0 1px 2px rgba(22, 24, 29, 0.06), 0 0 0 1px rgba(22, 24, 29, 0.05); }
.edlg-hv__stage.is-anim[data-n="0"] .edlg-hv__wa, .edlg-hv__stage.is-anim[data-n="x"] .edlg-hv__wa { opacity: 0; }
html.motion .edlg-hv__stage.is-booked .edlg-st--post { animation: edlg-pop 0.45s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes edlg-pop { from { transform: scale(0.6); opacity: 0; } }
@media (max-width: 1100px) and (min-width: 861px) { .edlg-hv__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); column-gap: 30px; } .edlg-hv__lane { width: 30px; } @keyframes edlg-lane { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(22px); } } .edlg-hv__src li > span:nth-child(2) > span { display: none; } }
@media (max-width: 560px) {
  .edlg-hv__stage { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding: 14px; }
  .edlg-hv__src { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .edlg-hv__src > li { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 5px; padding: 8px 4px; text-align: center; }
  .edlg-hv__g { width: 30px; height: 30px; border-radius: 10px; }
  .edlg-hv__g svg { width: 17px; height: 17px; }
  .edlg-hv__src b { font-size: 11.5px; }
  .edlg-hv__src li > span:nth-child(2) > span, .edlg-hv__lane { display: none; }
  .edlg-hv__phone { justify-self: center; width: min(272px, 100%); }
}

/* ---------- Problem: three gaps with fixes */
.edlg-gaps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.edlg-gaps > li { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--radius-card); background: var(--panel); }
.edlg-gaps .psg-status { justify-self: start; letter-spacing: 0.06em; text-transform: uppercase; }
.edlg-gaps h3 { font: 700 20px/1.25 var(--font-body); color: var(--ink); }
.edlg-gaps p { font: 500 15px/1.55 var(--font-body); color: var(--muted); }
.edlg-gaps .edlg-fix { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-2); }
.edlg-fix .psg-ic { width: 20px; height: 20px; color: var(--trust); margin-top: 1px; }
.edlg-fix b { color: var(--trust); margin-right: 4px; }
@media (max-width: 900px) { .edlg-gaps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Four-feed wall */
.edlg-wall { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.edlg-wall__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.edlg-wall__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.edlg-wall__tabs button, .edlg-wall__pause { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px 0 13px; border: 0; border-radius: 9999px; background: var(--panel); color: var(--ink); font: 600 14.5px/1 var(--font-body); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2); transition: background 0.2s, color 0.2s; }
.edlg-wall__tabs button svg { width: 17px; height: 17px; color: var(--c); }
.edlg-wall__tabs button:hover, .edlg-wall__pause:hover { box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.edlg-wall__tabs button[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.edlg-wall__tabs button:focus-visible, .edlg-wall__pause:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.edlg-wall__pause svg { width: 16px; height: 16px; fill: currentColor; }
.edlg-wall__pause .edlg-i-play, .edlg-wall__pause[aria-pressed="true"] .edlg-i-pause { display: none; }
.edlg-wall__pause[aria-pressed="true"] .edlg-i-play { display: block; }
.edlg-wall__list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.edlg-ph { position: relative; display: grid; align-content: start; gap: 14px; min-width: 0; padding: 16px 16px 20px; border-radius: var(--radius-card); background: var(--panel); transition: box-shadow 0.3s; }
.edlg-ph.is-on { box-shadow: inset 0 0 0 2px var(--gold-line); }
.edlg-ph__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.edlg-ph__head .edlg-pc { font-size: 13px; padding: 5px 9px 5px 8px; }
.edlg-ph__head b { font: 600 12.5px/1.2 var(--font-body); color: var(--muted); text-align: right; }
.edlg-ph__dev { position: relative; justify-self: center; width: min(100%, 244px); padding: 6px; border-radius: 30px; background: #16181d; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 36px rgba(22, 24, 29, 0.2); transition: transform 0.4s cubic-bezier(.2, .7, .2, 1); }
html.motion .edlg-ph.is-on .edlg-ph__dev { transform: translateY(-4px); }
.edlg-ph__lead { position: relative; z-index: 3; justify-self: center; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: center; width: min(100%, 216px); margin-top: -34px; padding: 9px 12px 9px 9px; border-radius: 14px; background: var(--panel); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), inset 0 0 0 1.5px var(--trust); transition: opacity 0.35s, transform 0.4s cubic-bezier(.2, .9, .3, 1.3); }
.edlg-ph__ok { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--trust); color: #fff; }
:root[data-theme="dark"] .edlg-ph__ok { color: #0e2a17; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .edlg-ph__ok { color: #0e2a17; } }
.edlg-ph__ok .psg-ic { font-size: 16px; }
.edlg-ph__lead b { display: block; font: 700 13px/1.2 var(--font-body); color: var(--ink); }
.edlg-ph__lead > span:last-child > span { display: block; font: 500 12px/1.25 var(--font-body); color: var(--muted); }
.edlg-ph__body { display: grid; gap: 10px; }
.edlg-ph__body p { font: 500 14.5px/1.5 var(--font-body); color: var(--ink-2); }
.edlg-ph__body ul { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 7px; }
.edlg-ph__body li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; font: 500 13.5px/1.4 var(--font-body); color: var(--muted); }
.edlg-ph__body li b { padding-top: 2px; font: 700 10.5px/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.edlg-wall.is-live .edlg-ph:not(.is-sent) .edlg-ph__lead { opacity: 0; transform: translateY(12px) scale(0.94); }

/* Phone screen: sized in container units so the whole mock scales as one piece. */
.edlg-scr { position: relative; container-type: inline-size; aspect-ratio: 9 / 18.6; overflow: hidden; border-radius: 24px; background: #fff; color: #16181d; font-family: var(--font-body); text-align: left; }
.edlg-scr::after { content: ""; position: absolute; inset: 0; z-index: 4; background: rgba(10, 12, 16, 0.42); opacity: 0; transition: opacity 0.35s; pointer-events: none; }
.edlg-ph.is-form .edlg-scr::after { opacity: 1; }
.edlg-scr svg { flex: none; }
.edlg-scr .edlg-av { width: 8.6cqw; height: 8.6cqw; font-size: 3.2cqw; }
.edlg-av--ring { box-shadow: 0 0 0 0.6cqw #fff, 0 0 0 1.2cqw #d4a648; }
.edlg-cta { position: relative; overflow: hidden; transition: transform 0.15s; }
.edlg-tap { position: absolute; left: 50%; top: 50%; width: 16cqw; height: 16cqw; margin: -8cqw 0 0 -8cqw; border-radius: 50%; background: radial-gradient(circle, rgba(240, 84, 16, 0.55), rgba(240, 84, 16, 0) 70%); opacity: 0; pointer-events: none; }
.edlg-ph.is-tap:not(.is-form) .edlg-cta { transform: scale(0.95); }
html.motion .edlg-ph.is-tap .edlg-tap { animation: edlg-tap 0.6s ease-out; }
@keyframes edlg-tap { 0% { opacity: 0.95; transform: scale(0.3); } 100% { opacity: 0; transform: scale(2.2); } }
.edlg-prog { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 0.9cqw; background: rgba(255, 255, 255, 0.28); }
.edlg-prog i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0.42); }
html.motion .edlg-ph.is-play .edlg-prog i { animation: edlg-prog 2.7s linear both; }
@keyframes edlg-prog { from { transform: scaleX(0.05); } to { transform: scaleX(0.92); } }

/* Bottom sheet: instant form, landing page or messages. Hidden until .is-form. */
.edlg-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; gap: 2.6cqw; align-content: start; padding: 3.4cqw 5cqw 6cqw; border-radius: 6cqw 6cqw 0 0; background: #fff; color: #16181d; box-shadow: 0 -2cqw 8cqw rgba(0, 0, 0, 0.25); transform: translateY(104%); transition: transform 0.5s cubic-bezier(.2, .7, .2, 1); }
.edlg-ph.is-form .edlg-sheet { transform: none; }
.edlg-sheet__grip { justify-self: center; width: 12cqw; height: 1.3cqw; border-radius: 9999px; background: #d5d8de; }
.edlg-sheet__from { display: flex; align-items: center; gap: 2.4cqw; font: 600 4.2cqw/1.2 var(--font-body); color: #4b505a; }
.edlg-sheet__h { font: 700 6.2cqw/1.15 var(--font-body); letter-spacing: -0.02em; color: #16181d; }
.edlg-sheet__p { margin-top: -1cqw; font: 500 4cqw/1.4 var(--font-body); color: #4b505a; }
.edlg-f { display: grid; gap: 0.9cqw; transition: opacity 0.35s, transform 0.35s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(0.35s + var(--k, 0) * 0.32s); }
.edlg-f > span { font: 600 3.6cqw/1.1 var(--font-body); color: #676d78; }
.edlg-f i { display: block; padding: 2.6cqw 3cqw; border-radius: 2.2cqw; background: #f1f3f5; box-shadow: inset 0 0 0 0.3cqw #e1e4e8; font: 500 4.2cqw/1.1 var(--font-body); font-style: normal; color: #16181d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edlg-sheet__btn { display: flex; align-items: center; justify-content: center; gap: 1.6cqw; height: 10.5cqw; margin-top: 1cqw; border-radius: 9999px; background: #16181d; color: #fff; font: 700 4.6cqw/1 var(--font-body); transition: background 0.3s, transform 0.15s; }
.edlg-ph.is-sent .edlg-sheet__btn { background: #0d7f37; }
.edlg-ph.is-sent .edlg-sheet__btn::before { content: "✓"; }
.edlg-wall.is-live .edlg-ph:not(.is-form) .edlg-f, .edlg-wall.is-live .edlg-ph:not(.is-form) .edlg-dm, .edlg-wall.is-live .edlg-ph:not(.is-form) .edlg-dm__quick { opacity: 0; transform: translateY(2.4cqw); }
.edlg-wall.is-live .edlg-ph:not(.is-form) .edlg-f { transition-delay: 0s; }

/* TikTok look-alike: dark, full-bleed vertical video. */
.edlg-scr--tt { background: #0f1115; color: #fff; }
.edlg-tt__vid { position: absolute; inset: 0; background: radial-gradient(95% 60% at 50% 28%, #2e3546, #0f1115 78%); }
.edlg-board { position: absolute; left: 7cqw; right: 7cqw; top: 22cqw; display: grid; gap: 3cqw; padding: 5cqw 5cqw 4.4cqw; border-radius: 3cqw; background: #f7f6f1; box-shadow: inset 0 0 0 1.2cqw #c7ad80, 0 2cqw 6cqw rgba(0, 0, 0, 0.35); color: #1d2230; }
.edlg-board__t { font: 700 4.6cqw/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: #3b4bd8; }
.edlg-bars { display: grid; gap: 2.4cqw; }
.edlg-bars i { position: relative; display: block; height: 7.4cqw; width: calc(var(--u) * 12.6cqw); border-radius: 1.2cqw; transform-origin: 0 50%;
  background: repeating-linear-gradient(90deg, transparent 0 calc(12.6cqw - 0.5cqw), #1d2230 calc(12.6cqw - 0.5cqw) 12.6cqw), var(--f, #ffd84a); box-shadow: inset 0 0 0 0.5cqw #1d2230; }
.edlg-bars i:nth-child(2) { --f: #8fd8cf; }
.edlg-bars b { position: absolute; left: -4.4cqw; top: 50%; transform: translateY(-50%); font: 700 3.8cqw/1 var(--font-body); color: #1d2230; }
.edlg-bars { padding-left: 4cqw; }
.edlg-board__r { justify-self: end; margin-top: -1cqw; padding: 1.2cqw 2.6cqw; border-radius: 1.6cqw; background: #0b0c0e; color: #fff; font: 700 4.8cqw/1 var(--font-body); }
html.motion .edlg-ph.is-play .edlg-bars i { animation: edlg-grow 0.6s cubic-bezier(.2, .7, .2, 1) both; }
html.motion .edlg-ph.is-play .edlg-bars i:nth-child(2) { animation-delay: 0.9s; }
html.motion .edlg-ph.is-play .edlg-board__r { animation: edlg-in 0.4s 1.8s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes edlg-grow { from { transform: scaleX(0); } }
@keyframes edlg-in { from { opacity: 0; transform: scale(0.7); } }
.edlg-teacher { position: absolute; left: 6cqw; top: 104cqw; width: 30cqw; height: 36cqw; }
.edlg-teacher::before { content: ""; position: absolute; left: 50%; top: 0; width: 15cqw; height: 15cqw; margin-left: -7.5cqw; border-radius: 50%; background: #e7b58d; box-shadow: inset 0 3.4cqw 0 #2a2320; }
.edlg-teacher::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20cqw; border-radius: 15cqw 15cqw 3cqw 3cqw; background: #2c3a8c; }
.edlg-sub { position: absolute; left: 6cqw; right: 6cqw; top: 86cqw; height: 9cqw; margin: 0; }
.edlg-sub span { position: absolute; left: 0; right: 0; top: 0; text-align: center; font: 700 5.2cqw/1.25 var(--font-body); color: #fff; text-shadow: 0 0.4cqw 1.6cqw rgba(0, 0, 0, 0.8); }
.edlg-sub span:not(:last-child) { opacity: 0; }
html.motion .edlg-ph.is-play .edlg-sub span:nth-child(1) { animation: edlg-sub 0.9s both; }
html.motion .edlg-ph.is-play .edlg-sub span:nth-child(2) { animation: edlg-sub 0.9s 0.9s both; }
html.motion .edlg-ph.is-play .edlg-sub span:nth-child(3) { animation: edlg-sub-end 0.35s 1.8s both; }
@keyframes edlg-sub { 0% { opacity: 0; transform: translateY(1.6cqw); } 18%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes edlg-sub-end { from { opacity: 0; transform: translateY(1.6cqw); } to { opacity: 1; transform: none; } }
.edlg-tt__rail { position: absolute; right: 4cqw; top: 104cqw; display: grid; gap: 5.4cqw; justify-items: center; }
.edlg-tt__rail svg { width: 8.4cqw; height: 8.4cqw; fill: #fff; filter: drop-shadow(0 0.4cqw 1cqw rgba(0, 0, 0, 0.5)); }
html.motion .edlg-ph.is-play .edlg-tt__rail svg:first-child { animation: edlg-like 0.5s 1.2s both; }
@keyframes edlg-like { 50% { transform: scale(1.3); } }
.edlg-tt__cap { position: absolute; left: 5cqw; right: 18cqw; top: 146cqw; display: grid; gap: 1cqw; }
.edlg-tt__cap b { font: 700 4.6cqw/1.2 var(--font-body); }
.edlg-tt__cap span { font: 500 4.2cqw/1.3 var(--font-body); opacity: 0.9; }
.edlg-cta--tt { position: absolute; left: 4cqw; right: 4cqw; top: 165cqw; display: flex; align-items: center; justify-content: space-between; height: 10.5cqw; padding: 0 3.6cqw; border-radius: 2cqw; background: rgba(255, 255, 255, 0.94); color: #111; font: 700 4.6cqw/1 var(--font-body); }
.edlg-cta--tt svg { width: 4.6cqw; height: 4.6cqw; }

/* YouTube look-alike: light app with a lesson player on top. */
.edlg-scr--yt { padding-top: 8%; background: #fff; }
.edlg-yt__player { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: radial-gradient(80% 90% at 50% 40%, #2b4a3c, #17291f); }
.edlg-yt__eq { font: 700 7.2cqw/1 var(--font-body); color: #f3efe4; letter-spacing: -0.01em; }
html.motion .edlg-ph.is-play .edlg-yt__eq { animation: edlg-chalk 2.4s both; }
@keyframes edlg-chalk { 0% { opacity: 0.15; transform: scale(0.96); } 30%, 100% { opacity: 1; transform: none; } }
.edlg-yt__tri { position: absolute; left: 4cqw; bottom: 3.6cqw; width: 0; height: 0; border-left: 3.6cqw solid rgba(255, 255, 255, 0.9); border-top: 2.2cqw solid transparent; border-bottom: 2.2cqw solid transparent; }
.edlg-prog--yt { height: 1cqw; }
.edlg-prog--yt i { background: #e5484d; }
.edlg-yt__meta { display: grid; gap: 1.2cqw; padding: 3.6cqw 4cqw 0; }
.edlg-yt__meta b { font: 700 5.4cqw/1.25 var(--font-body); color: #0f0f0f; letter-spacing: -0.01em; }
.edlg-yt__meta span { font: 500 3.8cqw/1.2 var(--font-body); color: #606060; }
.edlg-yt__ch { display: flex; align-items: center; gap: 2.4cqw; padding: 3cqw 4cqw; }
.edlg-yt__ch b { font: 600 4.4cqw/1 var(--font-body); }
.edlg-yt__ch em { margin-left: auto; padding: 2.2cqw 3.6cqw; border-radius: 9999px; background: #0f0f0f; color: #fff; font: 600 3.8cqw/1 var(--font-body); font-style: normal; }
.edlg-yt__desc { display: grid; gap: 2.2cqw; margin: 0 4cqw 2cqw; padding: 3.4cqw; border-radius: 3cqw; background: #f2f2f2; }
.edlg-yt__desc > span:first-child { font: 500 4.4cqw/1.35 var(--font-body); color: #0f0f0f; }
.edlg-cta--yt { justify-self: start; padding: 2.2cqw 3.6cqw; border-radius: 9999px; background: #fff; box-shadow: inset 0 0 0 0.35cqw #c9ced6; color: #065fd4; font: 700 4.1cqw/1 var(--font-body); }
.edlg-yt__rel { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: 3cqw; padding: 2cqw 4cqw; }
.edlg-yt__rel > i { display: block; aspect-ratio: 16 / 9; border-radius: 2cqw; background: #e9ebee; }
.edlg-yt__rel span { display: grid; gap: 1.8cqw; align-content: start; padding-top: 1cqw; }
.edlg-yt__rel span i { display: block; height: 3cqw; border-radius: 2cqw; background: #eceef1; }
.edlg-yt__rel span i + i { width: 62%; }
.edlg-sheet--page { top: 9cqw; padding-top: 4.4cqw; border-radius: 5cqw 5cqw 0 0; background: #fbfaf6; }
.edlg-sheet__url { justify-self: stretch; display: flex; align-items: center; gap: 1.6cqw; padding: 2.2cqw 3.4cqw; border-radius: 9999px; background: #eceae3; font: 600 3.7cqw/1 var(--font-body); color: #5b616b; }
.edlg-sheet__url svg { width: 3.6cqw; height: 3.6cqw; fill: #0d7f37; }
.edlg-sheet--page .edlg-sheet__h { margin-top: 2cqw; }
.edlg-sheet--page .edlg-sheet__btn { background: linear-gradient(135deg, #e9cf8a, #d4a648); color: #16181d; }

/* Instagram look-alike: a post with a carousel image, then messages. */
.edlg-scr--ig { padding-top: 8%; background: #fff; }
.edlg-ig__top { display: flex; align-items: center; gap: 2.6cqw; padding: 2.4cqw 3.6cqw 2.8cqw; }
.edlg-ig__top b { font: 700 4.4cqw/1 var(--font-body); }
.edlg-ig__top em { margin-left: auto; padding: 2cqw 3.6cqw; border-radius: 2cqw; background: #3b7be6; color: #fff; font: 700 3.8cqw/1 var(--font-body); font-style: normal; }
.edlg-ig__img { position: relative; aspect-ratio: 4 / 4.4; overflow: hidden; background: radial-gradient(90% 80% at 50% 20%, #3d3a78, #1d1b3a); }
.edlg-lab__wire { position: absolute; left: 20%; right: 20%; top: 30%; bottom: 30%; border: 1cqw solid #e9c46a; border-radius: 4cqw; }
.edlg-lab__bulb { position: absolute; z-index: 1; left: 50%; top: 30%; width: 15cqw; height: 15cqw; margin: -7.5cqw 0 0 -7.5cqw; border-radius: 50%; background: #f4ead2; box-shadow: 0 0 0 1cqw #e9c46a; }
.edlg-lab__bulb i { position: absolute; inset: -14cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 207, 138, 0.75), rgba(233, 207, 138, 0)); }
html.motion .edlg-ph.is-play .edlg-lab__bulb i { animation: edlg-glow 2.6s both; }
@keyframes edlg-glow { 0%, 35% { opacity: 0; transform: scale(0.6); } 55% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: none; } }
.edlg-lab__cell { position: absolute; z-index: 1; left: 50%; bottom: 30%; width: 18cqw; height: 9cqw; margin: 0 0 -4.5cqw -9cqw; border-radius: 1.6cqw; background: linear-gradient(90deg, #16181d 70%, #0b0c0e 70%); box-shadow: 0 0 0 0.8cqw #1d1b3a; }
.edlg-lab__cell::after { content: "+"; position: absolute; right: 22%; top: 50%; transform: translateY(-52%); font: 700 4.6cqw/1 var(--font-body); color: #fff; }
.edlg-ig__dots { position: absolute; left: 0; right: 0; bottom: 3cqw; display: flex; justify-content: center; gap: 1.4cqw; }
.edlg-ig__dots i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.edlg-ig__dots i:first-child { background: #fff; }
.edlg-ig__acts { display: flex; align-items: center; gap: 3.8cqw; padding: 3cqw 3.6cqw 2cqw; }
.edlg-ig__acts svg { width: 6.6cqw; height: 6.6cqw; fill: none; stroke: #16181d; stroke-width: 1.9; stroke-linejoin: round; }
.edlg-ig__acts .edlg-ig__save { margin-left: auto; }
html.motion .edlg-ph.is-play .edlg-ig__acts svg:first-child { fill: #e5484d; stroke: #e5484d; animation: edlg-like 0.5s 1.4s both; }
.edlg-ig__cap { margin: 0; padding: 0 3.6cqw; font: 500 4.4cqw/1.4 var(--font-body); color: #16181d; }
.edlg-ig__cap b { font-weight: 700; }
.edlg-cta--ig { display: flex; align-items: center; justify-content: center; height: 9.6cqw; margin: 3.4cqw 3.6cqw 0; border-radius: 2.4cqw; background: #eff1f4; font: 700 4.4cqw/1 var(--font-body); color: #16181d; }
.edlg-sheet--dm { top: 8cqw; display: flex; flex-direction: column; gap: 3cqw; padding: 4.4cqw 4cqw 6cqw; border-radius: 5cqw 5cqw 0 0; }
.edlg-sheet--dm .edlg-sheet__from { padding-bottom: 3cqw; border-bottom: 0.3cqw solid #eceef1; }
.edlg-dm { align-self: flex-start; max-width: 86%; padding: 2.8cqw 3.8cqw; border-radius: 4.4cqw 4.4cqw 4.4cqw 1.2cqw; background: #eff1f4; color: #16181d; font: 500 4.6cqw/1.35 var(--font-body); transition: opacity 0.35s, transform 0.35s; transition-delay: calc(0.4s + var(--k, 0) * 0.55s); }
.edlg-dm--me { align-self: flex-end; border-radius: 4.4cqw 4.4cqw 1.2cqw 4.4cqw; background: #3b7be6; color: #fff; }
.edlg-dm__quick { align-self: flex-end; padding: 2.4cqw 3.6cqw; border-radius: 9999px; box-shadow: inset 0 0 0 0.4cqw #3b7be6; color: #1f5cc4; font: 700 4cqw/1 var(--font-body); transition: opacity 0.35s, transform 0.35s, background 0.3s, color 0.3s; transition-delay: calc(0.4s + var(--k, 0) * 0.55s); }
.edlg-ph.is-sent .edlg-dm__quick { background: #3b7be6; color: #fff; }

/* Facebook look-alike: a sponsored post with a lead ad. */
.edlg-scr--fb { padding-top: 8%; background: #f0f2f5; }
.edlg-fb__top, .edlg-fb__txt, .edlg-fb__acts { background: #fff; }
.edlg-fb__top { display: flex; align-items: center; gap: 2.6cqw; padding: 3cqw 3.6cqw 2.4cqw; }
.edlg-fb__top b { display: block; font: 700 4.4cqw/1.1 var(--font-body); color: #050505; }
.edlg-fb__top > span:last-child > span { font: 500 3.5cqw/1.2 var(--font-body); color: #65676b; }
.edlg-fb__txt { margin: 0; padding: 0 3.6cqw 3cqw; font: 500 4.5cqw/1.4 var(--font-body); color: #1c1e21; }
.edlg-fb__img { position: relative; aspect-ratio: 1.15 / 1; overflow: hidden; background: linear-gradient(180deg, #f7efdc, #ead6a2); }
.edlg-fb__wb { position: absolute; left: 16%; right: 16%; top: 12%; height: 30%; display: grid; align-content: center; gap: 3cqw; padding: 0 6cqw; border-radius: 2cqw; background: #fff; box-shadow: inset 0 0 0 1cqw #9aa3b5; }
.edlg-fb__wb i { display: block; height: 2.2cqw; border-radius: 2cqw; background: #3b4bd8; }
.edlg-fb__wb i + i { width: 60%; background: #0b0c0e; }
html.motion .edlg-ph.is-play .edlg-fb__wb i { animation: edlg-grow 0.7s 0.5s cubic-bezier(.2, .7, .2, 1) both; transform-origin: 0 50%; }
html.motion .edlg-ph.is-play .edlg-fb__wb i + i { animation-delay: 1.2s; }
.edlg-fb__desks { position: absolute; left: 8%; right: 8%; bottom: 10%; display: flex; justify-content: space-around; }
.edlg-fb__desks i { position: relative; width: 19cqw; height: 6.6cqw; border-radius: 1.6cqw; background: #b9824a; }
.edlg-fb__desks i::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 12cqw; height: 7cqw; margin-left: -6cqw; border-radius: 6cqw 6cqw 0 0; background: var(--sh, #2c3a8c); }
.edlg-fb__desks i::after { content: ""; position: absolute; left: 50%; bottom: calc(100% + 6.4cqw); width: 8.4cqw; height: 8.4cqw; margin-left: -4.2cqw; border-radius: 50%; background: var(--sk, #e7b58d); box-shadow: inset 0 2.2cqw 0 #2a2320; }
.edlg-fb__desks i:nth-child(2) { --sh: #0d7f37; --sk: #b27b52; }
.edlg-fb__desks i:nth-child(3) { --sh: #0b0c0e; --sk: #f1caa6; }
.edlg-fb__link { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 3cqw 3.6cqw; background: #f0f2f5; }
.edlg-fb__link > span:first-child { display: grid; gap: 0.8cqw; min-width: 0; }
.edlg-fb__link > span:first-child span { font: 500 3.3cqw/1 var(--font-body); color: #65676b; text-transform: uppercase; letter-spacing: 0.02em; }
.edlg-fb__link b { font: 700 4.3cqw/1.1 var(--font-body); color: #050505; }
.edlg-cta--fb { flex: none; padding: 2.4cqw 3.8cqw; border-radius: 1.8cqw; background: #e4e6eb; color: #050505; font: 700 4cqw/1 var(--font-body); }
.edlg-fb__acts { display: flex; justify-content: space-around; padding: 2.8cqw 2cqw; border-top: 0.3cqw solid #e4e6eb; font: 600 3.7cqw/1 var(--font-body); color: #65676b; }
.edlg-fb__acts span { display: inline-flex; align-items: center; gap: 1.4cqw; }
.edlg-fb__acts svg { width: 4.6cqw; height: 4.6cqw; fill: none; stroke: #65676b; stroke-width: 2; stroke-linejoin: round; }
.edlg-scr--fb .edlg-sheet__btn { background: #3b7be6; }
.edlg-ig__next { margin-top: 4cqw; border-top: 0.3cqw solid #eceef1; padding-top: 3.4cqw; }
.edlg-ig__img--next { background: linear-gradient(160deg, #cfeee9, #8fd8cf); }
.edlg-fb__next { display: flex; align-items: center; gap: 2.6cqw; margin-top: 2.4cqw; padding: 3cqw 3.6cqw; background: #fff; }
.edlg-fb__next > span:last-child { display: grid; gap: 1.6cqw; flex: 1; }
.edlg-fb__next i { display: block; height: 2.6cqw; width: 44%; border-radius: 2cqw; background: #e4e6eb; }
.edlg-fb__next i + i { width: 26%; }
.edlg-fb__nimg { height: 60cqw; background: linear-gradient(160deg, #e3ecfd, #c6d7fa); }

/* Retargeting ribbon under the wall. */
.edlg-retarget { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 20px; border-radius: var(--radius-card); background: var(--panel); }
.edlg-retarget__line { position: relative; display: flex; justify-content: space-between; align-items: center; height: 14px; }
.edlg-retarget__line::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; border-top: 1.5px dashed var(--line-2); }
.edlg-retarget__line i { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--panel); }
.edlg-retarget p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 500 14.5px/1.5 var(--font-body); color: var(--ink-2); }
.edlg-retarget p > span:last-child { flex: 1 1 320px; }

@media (max-width: 1100px) { .edlg-wall__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .edlg-ph__dev { width: min(100%, 250px); } }
/* Phones: the wall becomes a swipe row; the phone in view plays. */
@media (max-width: 640px) {
  .edlg-wall__list { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)) 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 6px; scroll-padding-inline: var(--gutter); }
  .edlg-wall__list::-webkit-scrollbar { display: none; }
  .edlg-ph { flex: 0 0 82%; scroll-snap-align: center; }
  .edlg-ph__dev { width: min(100%, 236px); }
  .edlg-wall__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .edlg-wall__tabs::-webkit-scrollbar { display: none; }
  .edlg-wall__tabs button { flex: none; padding: 0 13px 0 11px; font-size: 14px; }
  .edlg-wall__bar { gap: 8px; }
  .edlg-retarget { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .edlg-retarget__line { max-width: 160px; }
}

/* ---------- Funnel: views on each platform flow down to trial bookings (illustrative). */
.edlg-fun { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(22px, 3.4vw, 48px); padding: clamp(22px, 3.2vw, 44px); border-radius: var(--radius-card); background: radial-gradient(60% 50% at 20% 0%, rgba(212, 166, 72, 0.12), transparent 70%), var(--panel); }
.edlg-fun__vis { display: grid; grid-template-rows: 30px minmax(0, 1fr) 22px; gap: 12px; min-width: 0; }
.edlg-fun__src { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.edlg-fun__src li { display: grid; place-items: center; height: 30px; border-radius: 9999px; background: color-mix(in srgb, var(--c) 18%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); font: 600 12.5px/1 var(--font-body); color: var(--ink); white-space: nowrap; }
.edlg-fun__body { position: relative; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 8px; min-height: 340px; }
.edlg-fun__st { display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 15px/1.1 var(--font-body); letter-spacing: -0.01em; color: var(--ink);
  clip-path: polygon(calc(50% - var(--t) * 0.5%) 0, calc(50% + var(--t) * 0.5%) 0, calc(50% + var(--b) * 0.5%) 100%, calc(50% - var(--b) * 0.5%) 100%); }
.edlg-fun__st b { font: 700 11px/1 var(--font-body); letter-spacing: 0.06em; opacity: 0.62; }
.edlg-fun__st:nth-child(1) { background: var(--gold-soft); }
.edlg-fun__st:nth-child(2) { background: color-mix(in srgb, var(--gold-1) 36%, var(--panel)); }
.edlg-fun__st:nth-child(3) { background: color-mix(in srgb, var(--gold-1) 72%, var(--panel)); color: #2a1f0e; }
.edlg-fun__st--end { background: linear-gradient(135deg, var(--sun), var(--sun-deep)); color: var(--on-sun); }
:root[data-theme="light"] .edlg-fun__st:nth-child(1) { background: color-mix(in srgb, var(--gold-1) 22%, var(--panel)); }
.edlg-fun__dots { position: absolute; inset: 0; pointer-events: none; }
.edlg-fun__dots i { position: absolute; inset: 0; opacity: 0; }
.edlg-fun__dots i::before { content: ""; position: absolute; top: 0; left: calc(var(--x) * 1%); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--panel) 70%, transparent), 0 0 12px var(--c); }
html.motion .edlg-fun__vis.is-run .edlg-fun__dots i { animation: edlg-fall 3.4s cubic-bezier(.45, 0, .55, 1) var(--d) 3 both; }
@keyframes edlg-fall { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(calc((50 - var(--x)) * var(--e) * 1%), calc(var(--e) * 100%)); } }
.edlg-fun__vis .edlg-note { justify-content: center; }
.edlg-fun__notes { list-style: none; margin: 0; padding: 42px 0 34px; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 8px; counter-reset: none; }
.edlg-fun__notes li { display: grid; align-content: center; gap: 6px; padding: 4px 0 4px 18px; border-left: 2px solid var(--line); }
.edlg-fun__notes li:last-child { border-left-color: var(--sun-deep); }
.edlg-fun__notes h3 { display: flex; align-items: center; gap: 10px; font: 700 17px/1.2 var(--font-body); color: var(--ink); }
.edlg-fun__notes h3 b { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 9999px; background: var(--gold-grad); color: var(--gold-ink); font: 700 11.5px/1 var(--font-body); letter-spacing: 0.02em; }
.edlg-fun__notes p { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; align-items: baseline; font: 500 14.5px/1.5 var(--font-body); color: var(--ink-2); }
.edlg-k { justify-self: start; white-space: nowrap; padding: 3px 7px; border-radius: 5px; font: 700 10.5px/1.2 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; text-align: center; vertical-align: 1px; }
.edlg-k--org { background: var(--trust-wash); color: var(--trust); }
.edlg-k--paid { background: var(--sun-wash); color: var(--sun-ink); }
.edlg-k--team { background: var(--teal-wash); color: var(--teal); }
.edlg-trio { margin-top: clamp(16px, 2vw, 24px); }
@media (max-width: 900px) {
  .edlg-fun { grid-template-columns: minmax(0, 1fr); }
  .edlg-fun__body { min-height: 300px; }
  .edlg-fun__notes { padding: 0; grid-template-rows: none; gap: 16px; }
}
@media (max-width: 520px) { .edlg-fun__st { font-size: 13px; } .edlg-fun__st b { display: none; } .edlg-fun__src li { font-size: 11px; } .edlg-fun__notes p { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* ---------- Content engine: pillars and a clickable sample week */
.edlg-pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.edlg-pillars li { display: grid; gap: 6px; align-content: start; padding: 18px 18px 20px; border-radius: var(--radius-card); background: var(--panel); }
.edlg-pillars li::before { content: ""; width: 28px; height: 4px; margin-bottom: 6px; border-radius: 4px; background: var(--c); }
.edlg-pillars b { font: 700 16px/1.25 var(--font-body); letter-spacing: -0.015em; color: var(--ink); }
.edlg-pillars span { font: 500 14px/1.45 var(--font-body); color: var(--muted); }
@media (max-width: 1000px) { .edlg-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .edlg-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } .edlg-pillars li:last-child { grid-column: 1 / -1; } .edlg-pillars li { padding: 16px; } }

.edlg-cal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: clamp(16px, 2vw, 24px); padding: clamp(20px, 3vw, 36px); border-radius: var(--radius-card); background: var(--panel); min-width: 0; }
.edlg-cal__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.edlg-cal__head h3 { font: 700 21px/1.2 var(--font-body); letter-spacing: -0.02em; color: var(--ink); }
.edlg-cal__hint { margin-left: auto; font: 500 14px/1.4 var(--font-body); color: var(--muted); }
.edlg-cal__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.edlg-cal__days button { display: grid; gap: 6px; align-content: start; min-height: 96px; padding: 12px; border: 0; border-radius: 14px; background: var(--bg); color: var(--ink); text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow 0.2s, background 0.2s; }
.edlg-cal__days button:hover { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.edlg-cal__days button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.edlg-cal__days button[aria-selected="true"] { background: var(--gold-soft); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.edlg-cal__days b { font: 700 11.5px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.edlg-cal__days button[aria-selected="true"] b { color: var(--accent-text); }
.edlg-cal__days span { font: 600 14px/1.25 var(--font-body); color: var(--ink); }
.edlg-cal__days i { display: flex; gap: 4px; margin-top: auto; font-style: normal; }
.edlg-cal__days s { width: 9px; height: 9px; border-radius: 50%; background: var(--c); text-decoration: none; }
.edlg-cal__panels { display: grid; gap: 14px; }
.edlg-cal__panel { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(18px, 3vw, 36px); align-items: center; }
.edlg-cal:not(.is-js) .edlg-cal__panel + .edlg-cal__panel { padding-top: 14px; border-top: 1px solid var(--line); }
.edlg-cal__panel:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 12px; }
html.motion .edlg-cal.is-js .edlg-cal__panel:not([hidden]) { animation: edlg-panel 0.4s cubic-bezier(.2, .7, .2, 1); }
@keyframes edlg-panel { from { opacity: 0; transform: translateY(8px); } }
.edlg-cal__post { position: relative; display: grid; align-content: end; gap: 10px; min-height: 230px; padding: 18px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 30%, var(--panel)), color-mix(in srgb, var(--c) 8%, var(--panel))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
.edlg-cal__fmt { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 9999px; background: var(--panel); font: 700 12px/1 var(--font-body); color: var(--ink); }
.edlg-cal__fmt svg { width: 15px; height: 15px; color: var(--c); }
.edlg-cal__fmt .psg-ic { font-size: 15px; }
.edlg-cal__post b { font: 700 clamp(19px, 1.8vw, 23px)/1.2 var(--font-body); letter-spacing: -0.02em; color: var(--ink); }
.edlg-cal__subt { justify-self: start; padding: 6px 10px; border-radius: 8px; background: rgba(12, 13, 16, 0.78); color: #fff; font: 600 13px/1.35 var(--font-body); }
.edlg-cal__info { display: grid; gap: 10px; align-content: start; }
.edlg-cal__info h4 { font: 700 22px/1.2 var(--font-body); letter-spacing: -0.02em; color: var(--ink); }
.edlg-cal__info > p { font: 500 15.5px/1.55 var(--font-body); color: var(--ink-2); }
.edlg-cal__info dl { margin: 6px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.edlg-cal__info dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.edlg-cal__info dt { padding-top: 3px; font: 700 11px/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.edlg-cal__info dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; font: 500 14.5px/1.5 var(--font-body); color: var(--ink); }
@media (max-width: 900px) {
  .edlg-cal__days { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 -4px; padding: 3px 4px 4px; }
  .edlg-cal__days::-webkit-scrollbar { display: none; }
  .edlg-cal__days button { flex: 0 0 116px; scroll-snap-align: start; min-height: 88px; }
  .edlg-cal__panel { grid-template-columns: minmax(0, 1fr); }
  .edlg-cal__post { min-height: 180px; }
  .edlg-cal__hint { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 520px) { .edlg-cal__info dl > div { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* ---------- Paid campaigns */
.edlg-ads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.edlg-ad { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2.4vw, 28px); border-radius: var(--radius-card); background: var(--panel); }
.edlg-ad__plats { display: flex; flex-wrap: wrap; gap: 6px; }
.edlg-ad h3 { font: 700 19px/1.25 var(--font-body); letter-spacing: -0.015em; color: var(--ink); }
.edlg-ad > p { font: 500 15px/1.55 var(--font-body); color: var(--ink-2); }
.edlg-ad__chips { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; }
.edlg-ad__chips li { padding: 6px 10px; border-radius: 9999px; background: var(--chip); color: var(--ink-2); font: 600 12.5px/1 var(--font-body); }
.edlg-ad--sun { background: linear-gradient(160deg, var(--sun), var(--sun-deep)); }
.edlg-ad--sun h3, .edlg-ad--sun > p { color: var(--on-sun); }
.edlg-ad--sun .edlg-pc { background: rgba(255, 255, 255, 0.6); color: #16181d; }
.edlg-ad--sun .edlg-ad__chips { border-top-color: rgba(22, 24, 29, 0.14); }
.edlg-ad--sun .edlg-ad__chips li { background: rgba(22, 24, 29, 0.1); color: #16181d; }
.edlg-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: clamp(14px, 1.8vw, 20px); padding: 14px 18px; border-radius: 14px; background: var(--teal-wash); font: 500 14.5px/1.5 var(--font-body); color: var(--ink); }
.edlg-rule > span:last-child { flex: 1 1 360px; }
@media (max-width: 1100px) { .edlg-ads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .edlg-ads { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Hand-off: tracking board (illustrative) */
.edlg-track { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(14px, 1.8vw, 22px); align-items: stretch; }
.edlg-board2 { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; padding: clamp(18px, 2.4vw, 26px); border-radius: var(--radius-card); background: var(--panel); min-width: 0; }
.edlg-board2__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.edlg-board2__head b { font: 700 17px/1.2 var(--font-body); color: var(--ink); }
.edlg-board2__wrap { overflow-x: auto; }
.edlg-board2__t { width: 100%; min-width: 520px; border-collapse: collapse; font: 500 14px/1.35 var(--font-body); color: var(--ink-2); }
.edlg-board2__t th, .edlg-board2__t td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap; }
.edlg-board2__t thead th { padding-top: 4px; font: 700 11px/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.edlg-board2__t tbody th { font-weight: 700; color: var(--ink); }
.edlg-board2__t tbody tr:last-child > * { border-bottom: 0; }
.edlg-board2__t .edlg-pc { margin-right: 4px; }
.edlg-track__why { display: grid; gap: 14px; align-content: center; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--radius-card); background: var(--panel); }
.edlg-track__why h3 { font: 700 20px/1.25 var(--font-body); letter-spacing: -0.015em; color: var(--ink); }
.edlg-track__why .checks span { font: 500 15px/1.45 var(--font-body); color: var(--ink); }
@media (max-width: 900px) { .edlg-track { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Mid-page plan offer */
.edlg-mid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(18px, 3vw, 40px); align-items: center; padding: clamp(24px, 4vw, 52px); border-radius: var(--radius-card); background: radial-gradient(70% 120% at 100% 0%, rgba(212, 166, 72, 0.2), transparent 60%), var(--panel); box-shadow: inset 0 0 0 2px var(--gold-line); }
.edlg-mid > div { display: grid; gap: 12px; max-width: 720px; }
.edlg-mid .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.edlg-mid .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--gold-grad); }
@media (max-width: 760px) { .edlg-mid { grid-template-columns: minmax(0, 1fr); } .edlg-mid .psg-btn { width: 100%; white-space: normal; text-align: center; } }

/* ---------- Care: consent, PDPA, platform rules, honest claims */
.edlg-care { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.edlg-care li { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.4vw, 28px); border-radius: var(--radius-card); background: var(--panel); }
.edlg-care .psg-dot { margin-bottom: 4px; }
.edlg-care h3 { font: 700 18px/1.25 var(--font-body); letter-spacing: -0.015em; color: var(--ink); }
.edlg-care p { font: 500 14.5px/1.55 var(--font-body); color: var(--ink-2); }
.edlg-care a { color: var(--link); text-underline-offset: 3px; }
@media (max-width: 1100px) { .edlg-care { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .edlg-care { grid-template-columns: minmax(0, 1fr); } }

.edlg-who { display: grid; gap: 14px; margin-top: clamp(28px, 3.6vw, 44px); }
.edlg-who h3 { font: 700 20px/1.25 var(--font-body); letter-spacing: -0.015em; color: var(--ink); }

/* Light theme: hairlines on the flat cards, like the rest of the site. */
:root[data-theme="light"] :is(.edlg-gaps > li, .edlg-ph, .edlg-fun, .edlg-cal, .edlg-ad:not(.edlg-ad--sun), .edlg-board2, .edlg-track__why, .edlg-care li, .edlg-pillars li, .edlg-retarget, .edlg-wall__tabs button:not([aria-pressed="true"]), .edlg-wall__pause) { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
:root[data-theme="light"] .edlg-ph.is-on { box-shadow: 0 0 0 2px var(--gold-line), 0 12px 30px rgba(140, 100, 30, 0.12); }
:root[data-theme="light"] .edlg-cal__days button:not([aria-selected="true"]) { background: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  .edlg-hv__list li, .edlg-sheet, .edlg-f, .edlg-dm, .edlg-dm__quick, .edlg-ph__lead, .edlg-ph__dev, .edlg-cta, .edlg-scr::after { transition: none; }
}
/* Without motion the platform buttons only scroll the phone row, so they show on phones only. */
@media (min-width: 641px) { .edlg-wall:not(.is-live) .edlg-wall__bar { display: none !important; } }