

.draft-banner { position: relative; z-index: 60; background: #171717; color: #fff; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; padding: 10px 16px; }

.est { padding: 72px 0 40px; }
.est-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start; }
.est-after { display: block; margin-top: 28px; }
.est-in { display: flex; flex-direction: column; gap: 30px; }
.est-eyebrow { font-size: 15px; letter-spacing: -0.02em; color: rgba(23,23,23,0.62); margin-bottom: -18px; }
.est-h1 { font-size: 50px; line-height: 1.02; letter-spacing: -0.05em; font-weight: 600; text-wrap: balance; }
.est-lede { font-size: 17px; line-height: 1.45; letter-spacing: -0.03em; color: rgba(23,23,23,0.7); max-width: 480px; margin-top: -10px; }

.est-earn { display: flex; flex-direction: column; gap: 6px; padding-top: 22px; border-top: 1px solid rgba(23,23,23,0.12); }
.est-earn-l { font-size: 14px; color: rgba(23,23,23,0.62); }
.est-earn-v { font-size: 48px; line-height: 1; letter-spacing: -0.05em; font-weight: 600; }
.est-earn-p { font-size: 14px; color: rgba(23,23,23,0.7); }
.est-earn-p b { color: #171717; }

.est-panel { position: sticky; top: 24px; background: #171717; color: #fff; border-radius: 24px; padding: 34px 34px 28px; display: flex; flex-direction: column; gap: 26px; }
.est-ptitle { font-size: 14px; color: rgba(255,255,255,0.7); letter-spacing: -0.01em; }
.est-row { display: flex; flex-direction: column; gap: 8px; }
.est-rh { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.est-rh b { font-size: 20px; font-weight: 500; letter-spacing: -0.03em; }
.est-v { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.est-v.is-ahead { color: #B1F445; }
.is-you .est-rh b, .is-you .est-v { font-size: 26px; font-weight: 700; }
.est-s { font-size: 14px; color: rgba(255,255,255,0.68); letter-spacing: -0.01em; }
.est-track { height: 34px; border-radius: 6px; background: rgba(255,255,255,0.06); overflow: hidden; }
.est-track i { display: block; height: 100%; min-width: 2px; border-radius: 6px; background: rgba(255,255,255,0.42); transition: width 240ms cubic-bezier(.16,1,.3,1); }
.is-you .est-track i { background: #B1F445; }
.est-foot { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.62); margin-top: 4px; }
.est-foot a { color: rgba(255,255,255,0.86); text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .est-track i { transition: none; } }

@media (max-width: 899px) {
  .est-wrap { grid-template-columns: 1fr; gap: 36px; }
  .est-panel { position: static; }
}
@media (max-width: 609px) {
  .est { padding-top: 44px; }
  .est-wrap { padding: 0 16px; }
  .est-h1 { font-size: 34px; }
  .est-lede { font-size: 15px; }
  .est-panel { padding: 26px 20px 22px; border-radius: 20px; gap: 22px; }
  .est-rh b, .est-v { font-size: 17px; }
  .is-you .est-rh b, .is-you .est-v { font-size: 20px; }
  .est-track { height: 26px; }
}

.est-chart { display: flex; flex-direction: column; gap: 24px; }
.ax-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: -10px; }
.ax { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 34px; }
.ax::after { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: rgba(255,255,255,0.55); border-radius: 1px; }
.ax-l, .ax-r { background: rgba(255,255,255,0.06); overflow: hidden; }
.ax-l { border-radius: 6px 0 0 6px; display: flex; justify-content: flex-end; }
.ax-r { border-radius: 0 6px 6px 0; }
.ax-l i, .ax-r i { display: block; height: 100%; transition: width 240ms cubic-bezier(.16,1,.3,1); }
.ax-l i { background: rgba(255,255,255,0.42); border-radius: 6px 0 0 6px; }
.ax-r i { background: #B1F445; border-radius: 0 6px 6px 0; }
.ax-net { position: absolute; top: -8px; bottom: -8px; width: 3px; margin-left: -1.5px; background: #fff; border-radius: 2px; transition: left 240ms cubic-bezier(.16,1,.3,1); z-index: 2; }
.ax-net b { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 700; color: #fff; }
.is-you .ax { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) { .ax-l i, .ax-r i, .ax-net { transition: none; } }
@media (max-width: 609px) { .ax { height: 26px; } }

.est-lab { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.est-info { width: 32px; height: 32px; margin: -6px 0; padding: 0; border: 0; border-radius: 999px; background: none; color: rgba(23,23,23,0.5); display: inline-grid; place-items: center; cursor: pointer; }
.est-info svg { width: 18px; height: 18px; }
.est-info:hover, .est-info[aria-expanded="true"] { color: #171717; }
.est-info:focus-visible { outline: 2px solid #171717; outline-offset: 1px; }
.est-tip { position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; width: max-content; max-width: min(320px, calc(100vw - 32px)); background: #fff; color: #171717; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.14), 0 1px 3px rgba(0,0,0,0.08); padding: 12px 14px; font-size: 14px; line-height: 1.45; letter-spacing: -0.01em; font-weight: 400; text-transform: none; white-space: normal; }
.est-tip[hidden] { display: none; }
.est-tip a { color: #171717; text-decoration: underline; text-underline-offset: 2px; }

.est-earn-l { font-size: 15px; }
.est-earn-v { font-size: 60px; }

.est-ptitle { display: flex; flex-direction: column; gap: 8px; font-size: inherit; color: #fff; }
.est-pt-n { font-size: 44px; line-height: 1; letter-spacing: -0.05em; font-weight: 700; }
.est-pt-n b { font-weight: 700; }
.est-pt-l { font-size: 15px; line-height: 1.35; letter-spacing: -0.02em; color: rgba(255,255,255,0.7); }

.est-rh b { font-size: 17px; font-weight: 500; }
.est-v { font-size: 28px; font-weight: 700; letter-spacing: -0.04em; }
.is-you .est-rh b { font-size: 20px; }
.is-you .est-v { font-size: 36px; }
.is-you .ax { margin-top: 6px; }
.ax.is-over .ax-r i { background: linear-gradient(90deg, #B1F445 80%, rgba(177,244,69,0.3)); }

.est-src { border-top: 1px solid rgba(255,255,255,0.14); padding-top: 14px; }
.est-src summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.86); }
.est-src summary::-webkit-details-marker { display: none; }
.est-src summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 200ms ease; }
.est-src[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.est-src summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.est-src ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.72); }
.est-src li b { color: #fff; font-weight: 600; }
.est-src a { color: rgba(255,255,255,0.9); text-decoration: underline; text-underline-offset: 2px; }
.est-src p { margin-top: 10px; font-size: 12px; color: rgba(255,255,255,0.55); }

@media (max-width: 609px) {
  .est-earn-v { font-size: 46px; }
  .est-pt-n { font-size: 34px; }
  .est-rh b { font-size: 15px; }
  .est-v { font-size: 22px; }
  .is-you .est-rh b { font-size: 17px; }
  .is-you .est-v { font-size: 28px; }
  .est-tip { max-width: calc(100vw - 48px); }
}

#energyCost + .calc-cost-prefix { margin-left: -3px; }
