/* Car studio (assets/js/car-studio.js): the view (canvas), a HUD panel over it on desktop / under it on phones, and an
   optional band below (a receipt). Express Detail, Oil change and Lube services. */
.pl-studio-wrap { padding-bottom: clamp(40px, 6vw, 72px); }
.pl-studio__head .pl-h2 { margin: 10px 0 0; }
.pl-studio__lede { margin: 12px 0 0; max-width: 52ch; color: var(--pl-muted); font-size: 16px; line-height: 1.55; }
.pl-studio { position: relative; margin: 22px auto 0; max-width: 1320px; color: #E9F6FF; overflow: hidden;
  background: radial-gradient(60% 50% at 45% 35%, rgba(31, 95, 255, .28), transparent 70%), linear-gradient(180deg, #06142E, #040B1A); }
@media (min-width: 1360px) { .pl-studio { border-radius: 24px; } }
.pl-studio__view { position: relative; height: clamp(440px, 50vw, 620px); }
.pl-studio__cv { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.pl-studio__sweep { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(180deg, transparent 0 46%, rgba(127, 227, 245, .06) 49%, rgba(127, 227, 245, .14) 50%, transparent 54%) 0 0 / 100% 220%;
  animation: pl-studio-sweep 8s linear infinite; }
@keyframes pl-studio-sweep { from { background-position: 0 100%; } to { background-position: 0 -120%; } }
.pl-studio__corner { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(127, 227, 245, .55); pointer-events: none; }
.pl-studio__corner--tl { top: 14px; left: 14px; border-width: 1.5px 0 0 1.5px; }
.pl-studio__corner--tr { top: 14px; right: 14px; border-width: 1.5px 1.5px 0 0; }
.pl-studio__corner--bl { bottom: 14px; left: 14px; border-width: 0 0 1.5px 1.5px; }
.pl-studio__corner--br { bottom: 14px; right: 14px; border-width: 0 1.5px 1.5px 0; }
.pl-studio__hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 999px; pointer-events: none;
  background: rgba(6, 20, 46, .75); border: 1px solid rgba(127, 227, 245, .35); color: var(--pl-cyan-ink); font: 600 12px/1 var(--pl-mono); letter-spacing: .08em; text-transform: uppercase;
  animation: pl-studio-hint 2.4s ease-in-out infinite; }
@keyframes pl-studio-hint { 50% { opacity: .55; } }

/* reticle and leader (the tunnel's) */
.pl-studio__reticle { position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none;
  border: 1.5px solid var(--c, var(--pl-cyan)); box-shadow: 0 0 16px var(--c, var(--pl-cyan)); transition: border-color .3s; }
.pl-studio__reticle::before { content: ""; position: absolute; inset: -8px; border: 1px dashed var(--c, var(--pl-cyan)); border-radius: 50%; opacity: .6; animation: pl-studio-spin 6s linear infinite; }
.pl-studio__reticle > span { position: absolute; inset: -14px; background:
  linear-gradient(var(--c, #3CCBEA), var(--c, #3CCBEA)) 50% 0 / 1px 9px no-repeat, linear-gradient(var(--c, #3CCBEA), var(--c, #3CCBEA)) 50% 100% / 1px 9px no-repeat,
  linear-gradient(var(--c, #3CCBEA), var(--c, #3CCBEA)) 0 50% / 9px 1px no-repeat, linear-gradient(var(--c, #3CCBEA), var(--c, #3CCBEA)) 100% 50% / 9px 1px no-repeat; }
@keyframes pl-studio-spin { to { transform: rotate(360deg); } }
.pl-studio__leader { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .3s; }
.pl-studio__leader line { stroke: var(--c, var(--pl-cyan)); stroke-width: 1; stroke-dasharray: 4 4; opacity: .85; }
.pl-studio__leader circle { fill: var(--c, var(--pl-cyan)); }

/* HUD panel */
.pl-studio__hud { position: absolute; z-index: 3; top: 22px; right: 22px; width: min(340px, 34%); padding: 18px 20px 18px; border: 1px solid rgba(127, 227, 245, .22); border-radius: 4px;
  background: rgba(6, 20, 46, .62); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); --c: var(--pl-cyan); }
.pl-studio__hud::before, .pl-studio__hud::after { content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid var(--c); }
.pl-studio__hud::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.pl-studio__hud::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.pl-studio__hud.is-in { animation: pl-studio-in .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes pl-studio-in { from { opacity: 0; filter: blur(12px); transform: translateY(14px) scale(.97); } to { opacity: 1; filter: none; transform: none; } }
.pl-studio__hud-k { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 11px/1 var(--pl-mono); letter-spacing: .14em; color: rgba(213, 222, 234, .7); }
.pl-studio__sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.pl-studio__hud-kind { margin-left: auto; padding: 4px 7px; border-radius: 4px; border: 1px solid rgba(213, 222, 234, .25); letter-spacing: .08em; }
.pl-studio__hud-name { margin: 12px 0 0; font-size: clamp(22px, 2vw, 28px); font-weight: 650; letter-spacing: -0.03em; color: #fff; line-height: 1.1; }
.pl-studio__hud-desc { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--pl-on-dark, #D5DEEA); }
.pl-studio__hud-items { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.pl-studio__hud-items li { display: flex; gap: 9px; font-size: 14px; color: #E9F6FF; }
.pl-studio__hud-items li::before { content: "✓"; color: var(--c); font-weight: 700; }
.pl-studio__hud-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.pl-studio__hud-price { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-studio__hud-price > span:first-child { font-size: 26px; font-weight: 650; letter-spacing: -0.04em; color: #fff; }
.pl-studio__hud-per { font: 500 11px/1 var(--pl-mono); letter-spacing: .06em; color: rgba(213, 222, 234, .6); text-transform: uppercase; }
.pl-studio__hud-btn { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--c); background: transparent; color: #fff; font: 600 14px/1 var(--pl-font); cursor: pointer; transition: background .2s, color .2s; }
.pl-studio__hud-btn:hover { background: rgba(255, 255, 255, .08); }
.pl-studio__hud-btn.is-on { background: var(--c); color: var(--pl-navy-deep); }
.pl-studio__hud-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* receipt band under the car */
.pl-studio__sum { position: relative; padding: 18px clamp(16px, 3vw, 28px) 22px; border-top: 1px solid rgba(127, 227, 245, .16); background: rgba(4, 11, 26, .55); }
.pl-studio__sum-k { margin: 0; font: 600 11px/1 var(--pl-mono); letter-spacing: .14em; color: var(--pl-cyan-ink); }
.pl-studio__sum-lines { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px 12px; }
.pl-studio__sum .pl-bk-sum__line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); }
.pl-studio__sum .pl-bk-sum__line[hidden] { display: none; }
.pl-studio__sum .pl-bk-sum__l { margin: 0; color: #fff; font-weight: 600; font-size: 14px; }
.pl-studio__sum .pl-bk-sum__s { margin: 2px 0 0; color: rgba(213, 222, 234, .65); font-size: 12px; }
.pl-studio__sum .pl-bk-sum__v { margin: 0; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-studio__sum-hint { margin: 10px 0 0; font-size: 14px; color: var(--pl-cyan-ink); }
.pl-studio__sum-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 16px; }
.pl-studio__total { margin: 0; font-size: 15px; color: rgba(213, 222, 234, .75); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pl-studio__total strong { font-size: clamp(30px, 3vw, 40px); letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; }
.pl-studio__save { color: #3FD08A; font-weight: 600; }
.pl-studio__go { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 12px; background: var(--pl-cyan); color: var(--pl-navy-deep); font-weight: 700; text-decoration: none; }
.pl-studio__go:hover { background: var(--pl-cyan-ink); color: var(--pl-navy-deep); text-decoration: none; }

@media (max-width: 759.98px) {
  .pl-studio__view { height: 420px; }
  .pl-studio__hud { position: relative; top: auto; right: auto; width: auto; margin: 0 16px 16px; }
  .pl-studio__hud-name { font-size: 22px; }
  /* (2026-10-14: "Tap a part of the car" wrapped to two lines at 375) */
  .pl-studio__hint { white-space: nowrap; font-size: 11px; letter-spacing: .04em; padding: 7px 12px; }
}
@media (prefers-reduced-motion: reduce) { .pl-studio__hint, .pl-studio__reticle::before, .pl-studio__hud.is-in, .pl-studio__sweep { animation: none; } }

/* oil: the oil-life ring and what's going in, in the band under the car */
.pl-studio__oil { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.pl-studio__ring { width: 64px; height: 64px; transform: rotate(-90deg); flex: none; }
.pl-studio__ring circle { fill: none; stroke: rgba(127, 227, 245, .16); stroke-width: 5; }
.pl-studio__ring circle + circle { stroke: var(--pl-cyan); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; filter: drop-shadow(0 0 5px var(--pl-cyan)); }
.pl-studio__oil-life { display: flex; flex-direction: column; gap: 4px; margin-left: -6px; }
.pl-studio__oil-life strong { font-size: 26px; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.pl-studio__oil-what { display: flex; flex-direction: column; gap: 4px; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .12); }
.pl-studio__oil-what .pl-studio__sum-k { margin: 0; }
.pl-studio__oil-name { margin: 0; font-size: 20px; font-weight: 650; color: #fff; letter-spacing: -0.02em; }
.pl-studio__oil-miles { margin: 0; font: 600 12px/1.2 var(--pl-mono); letter-spacing: .06em; color: var(--pl-cyan-ink); text-transform: uppercase; }