/* Search landing pages v2 (2 Nov 2026): built on the market page itself; only these blocks are new. */

/* account card next to the explainer, same material as the configurator card */
.l2-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,88px);align-items:center}
.l2-prose p{font-size:17px;line-height:1.72;color:var(--ink-2);margin:0 0 16px;max-width:62ch}
.l2-prose p b{color:var(--dv-ink)}
.l2-prose .l2-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.l2-prose .l2-facts span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:var(--radius-pill);background:#fff;font-size:14px;font-weight:600;color:var(--dv-ink)}
.l2-prose .l2-facts span i{width:7px;height:7px;border-radius:50%;background:var(--dv-blue)}

.l2-acct{position:relative;border-radius:var(--radius-2xl);padding:26px;background:linear-gradient(160deg,#0d1730 0%,#0a1124 60%,#070c16 100%);color:#fff;
  box-shadow:0 50px 90px -40px rgba(7,12,22,.65),inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden;isolation:isolate}
.l2-acct::before{content:"";position:absolute;inset:-40% -20% auto auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(79,125,240,.42),transparent);z-index:-1}
.l2-acct__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.l2-acct__id{display:flex;align-items:center;gap:12px}
.l2-acct__id img{width:34px;height:34px;border-radius:10px;background:#fff;padding:5px}
.l2-acct__id b{display:block;font:600 17px/1.2 var(--font-display)}
.l2-acct__id small{display:block;font:500 11px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.l2-live{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:var(--radius-pill);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font:600 12px/1 var(--font-body)}
.l2-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#7ea2ff;box-shadow:0 0 0 0 rgba(126,162,255,.6);animation:l2pulse 2s infinite}
@keyframes l2pulse{70%{box-shadow:0 0 0 8px rgba(126,162,255,0)}100%{box-shadow:0 0 0 0 rgba(126,162,255,0)}}
.l2-bal{display:flex;align-items:baseline;gap:10px;margin:4px 0 18px}
.l2-bal b{font:700 44px/1 var(--font-display);letter-spacing:-.02em}
.l2-bal small{font:500 12px/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.l2-bar{position:relative;height:10px;border-radius:999px;background:rgba(255,255,255,.08);margin:6px 0 8px;overflow:hidden}
.l2-bar i{position:absolute;inset:0 auto 0 0;width:var(--w,50%);border-radius:inherit;background:linear-gradient(90deg,#4a6fa5,#7ea2ff)}
.l2-bar--loss i{background:linear-gradient(90deg,#e05a5a,#ff8a8a)}
.l2-rowk{display:flex;justify-content:space-between;font:500 11.5px/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.l2-rows{margin-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.l2-rows div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:14.5px}
.l2-rows div:last-child{border-bottom:0}
.l2-rows span{color:rgba(255,255,255,.62)}
.l2-rows b{font-weight:600}
.l2-ladder{display:flex;gap:6px;margin-top:16px}
.l2-ladder span{flex:1;text-align:center;padding:10px 6px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font:600 15px/1.1 var(--font-display)}
.l2-ladder span small{display:block;margin-top:4px;font:500 10.5px/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.l2-ladder span.on{background:rgba(79,125,240,.22);border-color:rgba(126,162,255,.45)}

/* trailing drawdown chart */
.l2-trail{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,64px);align-items:center}
.l2-chart{border:1px solid var(--line);border-radius:var(--radius-2xl);background:#fff;padding:22px 22px 14px;box-shadow:0 30px 60px -40px rgba(15,23,42,.35)}
.l2-chart__h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font:500 12px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.l2-chart__h b{color:var(--dv-ink);font-family:var(--font-display);text-transform:none;letter-spacing:0;font-size:16px}
.l2-chart svg{display:block;width:100%;height:auto}
.l2-chart .grid line{stroke:rgba(15,23,42,.06)}
.l2-chart .ax text{font:500 11px var(--font-mono);fill:var(--ink-3)}
.l2-chart .bal{fill:none;stroke:#4f7df0;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1400;stroke-dashoffset:1400}
.l2-chart .area{fill:url(#l2g);opacity:0}
.l2-chart .floor{fill:none;stroke:#d64545;stroke-width:2;stroke-dasharray:6 5}
.l2-chart .hwm{stroke:#4f7df0;stroke-width:1;stroke-dasharray:3 4;opacity:.6}
.l2-chart .lbl{font:600 12px var(--font-body)}
.l2-chart .lbl.b{fill:#33527d}
.l2-chart .lbl.r{fill:#b91c1c}
.l2-chart .dot{fill:#fff;stroke:#4f7df0;stroke-width:2.5}
.l2-chart .dot.r{stroke:#d64545}
.l2-chart.is-in .bal{animation:l2draw 2.4s var(--ease-emphasis) forwards}
.l2-chart.is-in .area{animation:l2fade .8s 1.4s forwards}
@keyframes l2draw{to{stroke-dashoffset:0}}
@keyframes l2fade{to{opacity:1}}
.l2-legend{display:grid;gap:14px}
.l2-legend div{border-left:2px solid var(--dv-blue);padding:2px 0 2px 16px}
.l2-legend div.r{border-color:#d64545}
.l2-legend b{display:block;font:700 26px/1.1 var(--font-display);color:var(--dv-ink)}
.l2-legend span{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.l2-note{font-size:15px;line-height:1.65;color:var(--ink-2);margin:22px 0 0;max-width:70ch}

/* instant vs evaluation */
.l2-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.l2-vs > div{position:relative;border:1px solid var(--line);border-radius:var(--radius-2xl);padding:28px;background:#fff;overflow:hidden}
.l2-vs > div.dark{background:linear-gradient(160deg,#0d1730,#070c16);border-color:transparent;color:#fff}
.l2-vs .tag{display:inline-block;font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dv-blue);margin-bottom:12px}
.l2-vs .dark .tag{color:#9db9ff}
.l2-vs h3{font:600 22px/1.25 var(--font-display);margin:0 0 6px}
.l2-vs .who{font-size:14.5px;color:var(--ink-3);margin:0 0 18px}
.l2-vs .dark .who{color:rgba(255,255,255,.6)}
.l2-vs dl{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);margin:0;border-top:1px solid var(--line-2)}
.l2-vs .dark dl{border-color:rgba(255,255,255,.1)}
.l2-vs dt,.l2-vs dd{padding:12px 0;border-bottom:1px solid var(--line-2);font-size:15px;margin:0}
.l2-vs .dark dt,.l2-vs .dark dd{border-color:rgba(255,255,255,.08)}
.l2-vs dt{color:var(--ink-3)}
.l2-vs .dark dt{color:rgba(255,255,255,.55)}
.l2-vs dd{font-weight:600;color:var(--dv-ink)}
.l2-vs .dark dd{color:#fff}
.l2-vs .go{display:inline-flex;margin-top:20px}

@media (max-width:980px){
  .l2-split,.l2-trail{grid-template-columns:1fr}
  .l2-vs{grid-template-columns:1fr}
}
@media (max-width:560px){
  .l2-acct{padding:20px}
  .l2-bal b{font-size:36px}
  .l2-chart{padding:16px 12px 10px}
}