/* Business email demo: "Why emails land in spam" (Builder S). Prefix: ed- (HTML) and ed-* classes inside the SVG. */
.ed__recs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ed__rec { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .02); cursor: pointer; text-align: left; transition: border-color .35s, background .35s, box-shadow .5s, transform .5s var(--ease); }
.ed__rec:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .035); transform: translateY(-2px); }
.ed__rec.is-sel { border-color: rgba(255, 255, 255, .5); }
.ed__rec.is-on { border-color: rgba(198, 244, 50, .45); background: linear-gradient(rgba(198, 244, 50, .035), rgba(198, 244, 50, .035)), rgba(255, 255, 255, .02); }
.ed__rec.is-on.is-sel { border-color: var(--lime); box-shadow: 0 0 0 1px rgba(198, 244, 50, .18), 0 0 50px rgba(198, 244, 50, .08); }
.ed__rec-n { font: 400 11px/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.ed__rec b { margin-top: 6px; font: 500 clamp(30px, 3.2vw, 46px)/1 var(--mono); letter-spacing: -.04em; }
.ed__rec small { min-height: 2.6em; font-size: 13.5px; line-height: 1.4; color: rgba(245, 245, 244, .62); }
.ed__st { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 12px 6px 10px; border: 1px solid var(--line-2); border-radius: 999px; font: 400 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: border-color .3s, color .3s; }
.ed__st i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); transition: background .3s, border-color .3s, box-shadow .3s; }
.ed__st em { font-style: normal; }
.ed__rec.is-on .ed__st { color: #fff; border-color: rgba(198, 244, 50, .55); }
.ed__rec.is-on .ed__st i { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 10px var(--lime); }

.ed__why { display: grid; align-content: start; gap: 8px; max-width: 74ch; min-height: 138px; margin: clamp(20px, 2.4vw, 30px) 0 4px; padding-left: 18px; border-left: 2px solid var(--lime); }
.ed__why-t { font: 500 clamp(19px, 1.9vw, 25px)/1.25 var(--sans); letter-spacing: -.03em; }
.ed__why-e { font-size: 15.5px; line-height: 1.5; color: rgba(245, 245, 244, .7); }

.ed__track { margin-top: clamp(10px, 2vw, 22px); }
.ed__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ed__svg--v { display: none; max-width: 380px; margin-inline: auto; }
.ed-card { fill: #0e0e0e; stroke: var(--line-2); stroke-width: 1; }
.ed-t { font: 400 10px var(--mono); letter-spacing: .08em; fill: var(--muted); }
.ed-t--s { font-size: 9.5px; letter-spacing: .01em; }
.ed-tb { font: 500 15px var(--sans); letter-spacing: -.02em; fill: #fff; }
.ed-line { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; stroke-dasharray: 3 6; }
.ed-gr { fill: #0a0a0a; stroke: rgba(255, 255, 255, .4); stroke-width: 1.4; stroke-dasharray: 3 4; transition: stroke .35s, fill .35s; }
.ed-gl { font: 500 15px var(--mono); letter-spacing: .02em; fill: rgba(255, 255, 255, .72); transition: fill .3s; }
.ed-tick { fill: none; stroke: var(--lime); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ed-x { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1.8; stroke-linecap: round; }
.ed-gate.is-set .ed-gr { stroke: var(--lime); stroke-dasharray: none; fill: rgba(198, 244, 50, .06); }
.ed-gate.is-set .ed-tick { opacity: 1; }
.ed-gate.is-set .ed-x { opacity: 0; }
.ed-gate.is-set .ed-gl { fill: #fff; }
.ed-gate.is-check .ed-gr { stroke: #fff; stroke-width: 2.4; }
.ed-gate.is-set.is-check .ed-gr { stroke: var(--lime); stroke-width: 2.4; filter: drop-shadow(0 0 8px rgba(198, 244, 50, .7)); }
.ed-gate.is-fail .ed-gr { stroke: #fff; stroke-width: 2.4; stroke-dasharray: none; fill: rgba(255, 255, 255, .08); }
.ed-gate.is-fail .ed-x { stroke: #fff; }
.ed-tray { transition: opacity .3s, stroke .4s; fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ed-tick--b { opacity: 0; }
.ed-inbox .ed-card { transition: stroke .5s, fill .5s; }
.ed-inbox.is-got .ed-card { stroke: var(--lime); fill: rgba(198, 244, 50, .05); filter: drop-shadow(0 0 14px rgba(198, 244, 50, .25)); }
.ed-inbox.is-got .ed-tray { opacity: 0; }
.ed-inbox.is-got .ed-tick--b { opacity: 1; }
.ed-binr { fill: rgba(255, 255, 255, .02); stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; stroke-dasharray: 4 6; transition: stroke .4s, fill .4s; }
.ed-bin.is-got .ed-binr { stroke: rgba(255, 255, 255, .6); fill: rgba(255, 255, 255, .06); }
.ed-er { fill: #0e0e0e; stroke: #fff; stroke-width: 1.6; }
.ed-ef { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.ed-env { transition: transform .75s cubic-bezier(.5, .05, .25, 1), opacity .4s; transform-box: view-box; }
.ed-env.no-tr { transition: none; }
.ed-env.is-fall { transition: transform .8s cubic-bezier(.5, 0, .9, .6), opacity .4s; }
.ed-env.is-ok .ed-er { stroke: var(--lime); }
.ed-env.is-ok .ed-ef { stroke: var(--lime); }
html[data-motion="off"] .ed-env, html[data-motion="off"] .ed-gr { transition: none; }

.ed__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: clamp(12px, 2vw, 22px); }
.ed__reset { padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--line-2); background: none; cursor: pointer; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: color .3s, border-color .3s; }
.ed__reset:hover { color: #fff; border-color: var(--lime); }
.ed__out { flex: 1 1 280px; font: 400 13px/1.5 var(--mono); color: rgba(245, 245, 244, .85); }
.ed__out::before { content: "> "; color: var(--lime); }

@media (max-width: 960px) { .ed__recs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .ed__why { min-height: 0; } }
@media (max-width: 640px) {
  .ed__rec { padding: 16px 14px 14px; }
  .ed__rec small { min-height: 0; font-size: 12.5px; }
  .ed__svg--h { display: none; }
  .ed__svg--v { display: block; }
  .ed-gl { font-size: 17px; }
  .ed__why { padding-left: 14px; }
}