/* Delivery 549 — Landing design "Editorial Calm": light and sober, a floating photo collage,
   a rotating headline word, a moving stats ticker, numbered sections with fine rules. */
.lp--editorial { --bg: #fbf7f2; --surface: #fff; }
.lp--editorial .lp-hdr { background: color-mix(in srgb, var(--bg) 70%, transparent); }

.ed-hero { position: relative; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); overflow: hidden; }
.ed-hero::before { content: ""; position: absolute; width: 60vw; height: 60vw; max-width: 820px; max-height: 820px; right: -18vw; top: -24vw; border-radius: 50%; background: radial-gradient(circle, rgba(251,146,60,.22), transparent 62%); animation: edGlow 16s ease-in-out infinite alternate; pointer-events: none; }
@keyframes edGlow { to { transform: translate(-6vw, 6vw) scale(1.1); } }
.ed-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 980px) { .ed-grid { grid-template-columns: 1.08fr .92fr; } }
.ed-copy .lp-kick { color: var(--ink-2); }
/* rotating word + underline: base.css (Delivery 550 — used by every design) */

.ed-collage { position: relative; height: clamp(360px, 46vw, 540px); }
.ed-ph { position: absolute; margin: 0; overflow: hidden; border-radius: 24px; box-shadow: 0 30px 70px -30px rgba(26,22,19,.55); transition: translate .6s var(--ease); background: #eadfd3; }
.ed-ph img { width: 100%; height: 100%; object-fit: cover; }
.ed-ph1 { left: 0; top: 0; width: 64%; height: 70%; animation: edFloat 9s ease-in-out infinite; }
.ed-ph2 { right: 0; top: 17%; width: 46%; height: 46%; animation: edFloat 11s ease-in-out infinite reverse; border: 6px solid var(--bg); }
.ed-ph3 { left: 17%; bottom: 0; width: 50%; height: 37%; animation: edFloat 10s ease-in-out infinite .8s; border: 6px solid var(--bg); }
@keyframes edFloat { 50% { transform: translateY(-12px); } }
.ed-badge { position: absolute; right: 4%; bottom: 7%; display: flex; align-items: center; gap: .75rem; padding: .9rem 1.15rem; border-radius: 18px; background: #fff; box-shadow: 0 24px 50px -22px rgba(0,0,0,.4); font-size: .8rem; color: var(--ink-2); transition: translate .6s var(--ease); animation: edFloat 8s ease-in-out infinite .3s; }
.ed-badge b { display: block; font-size: 1.55rem; line-height: 1; color: var(--ink); letter-spacing: -.03em; }
.ed-ring { width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(var(--brand) 0 0, #f3e6da 0); display: grid; place-items: center; animation: edRing 2.4s var(--ease) .6s forwards; }
.ed-ring::after { content: ""; width: 32px; height: 32px; border-radius: 50%; background: #fff; }
@property --edp { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.ed-ring { --edp: 0%; background: conic-gradient(var(--brand) 0 var(--edp), #f3e6da var(--edp)); }
@keyframes edRing { to { --edp: 76%; } }

.ed-ticker { border-block: 1px solid var(--line); background: var(--surface); overflow: hidden; white-space: nowrap; padding: 1.3rem 0; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ed-ticker__row { display: inline-flex; gap: 3.6rem; padding-left: 2rem; animation: edTick 36s linear infinite; }
.ed-ticker:hover .ed-ticker__row { animation-play-state: paused; }
.ed-ticker span { display: inline-flex; align-items: baseline; gap: .7rem; font-size: 1.02rem; color: var(--ink-2); }
.ed-ticker b { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.03em; color: var(--ink); }
.ed-ticker i { font-style: normal; color: var(--brand); font-size: 1.3rem; margin-left: 2.6rem; }
@keyframes edTick { to { transform: translateX(-33.333%); } }

/* numbered sections with a fine rule that fills in */
.lp--editorial .lp-steps { gap: 0; border-top: 1px solid var(--line); }
.lp--editorial .lp-step { background: none; border: 0; border-radius: 0; padding: 2.2rem 2rem 2.4rem 0; }
.lp--editorial .lp-step:hover { transform: none; box-shadow: none; }
@media (min-width: 900px) {
  .lp--editorial .lp-step + .lp-step { padding-left: 2rem; border-left: 1px solid var(--line); }
}
.lp--editorial .lp-step::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--grad); transition: width 1.2s var(--ease); transition-delay: calc(var(--d, 0ms) + 300ms); }
.lp--editorial .lp-step.is-in::before { width: 100%; }
.lp--editorial .lp-step__n { font-size: .82rem; letter-spacing: .14em; }
.lp--editorial .lp-step__tag { display: inline; margin: 0 0 0 .4rem; color: var(--brand); }
.lp--editorial .lp-step h3 { margin-top: .9rem; font-size: 1.45rem; }
