/* Container */
.usgm3 { max-width: 720px; margin: 20px auto; padding: 20px; border: 1px solid #eee; border-radius: 12px; font-family: system-ui, Arial, sans-serif; background:#fff; }
.usgm3__h2 { margin: 0 0 .5rem; font-size: 1.6rem; }

/* Controls */
.usgm3__mode { display: flex; gap: 1rem; margin: .5rem 0 1rem; }
.usgm3__slider { margin: .5rem 0 1rem; }
.usgm3__row { display: flex; gap: .5rem; align-items: baseline; }
.usgm3__label { font-weight: 600; }
.usgm3__value { font-variant-numeric: tabular-nums; min-width: 5ch; text-align: right; display: inline-block; }
.usgm3__unit { opacity: .75; }
.usgm3__range { width: 100%; margin: .75rem 0 1.25rem; }
.usgm3__ticks { position: relative; height: 1.25rem; font-size: .8rem; color: #555; }
.usgm3__tick { position: absolute; transform: translateX(-50%); top: 0; white-space: nowrap; }

.usgm3__hint { font-size: .85rem; opacity: .85; margin: .25rem 0 0; }

/* Result */
.usgm3__result { background: #f8f9fb; border: 1px solid #e6e8ee; border-radius: 10px; padding: .75rem; }
.usgm3__meter { font-size: 1.05rem; margin: 0 0 .35rem; }
.usgm3__meta { display: flex; gap: .75rem; flex-wrap: wrap; }
.usgm3__buy { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .9rem; border-radius: 8px; text-decoration: none; border: 1px solid #d7dbe5; background: #fff; cursor: pointer; }
.usgm3__buy:hover { background: #f1f3f7; }

/* Primary quote button */
.usgm3__quote { display:inline-flex; align-items:center; gap:.4rem; padding:.6rem 1rem; border-radius:8px; border:none; cursor:pointer; background:#1a73e8; color:#fff; }
.usgm3__quote:hover { filter: brightness(0.95); }

.usgm3__why { font-size:.9rem; opacity:.9; margin:.5rem 0 0; }
.usgm3__why a { text-decoration:underline; }

/* Form */
.usgm3__form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e6e8ee; }

/* Focus states */
.usgm3 a:focus, .usgm3 button:focus, .usgm3 input:focus { outline: 2px solid #4c8bf5; outline-offset:2px; }