/* Dealer page. Uses the site's own fonts and colours: Space Grotesk headings, Outfit text, the red accent for the one main action,
   a dark card for the featured plan. White space and rules do the separating; boxes are kept for plans and forms only. */
.pp-page { width: 100%; box-sizing: border-box; max-width: 68rem; margin: 0 auto; padding: 2.5rem 1.25rem 5rem; color: var(--text-primary); }
.pp-page h1, .pp-page h2, .pp-page h3, .pp-price { font-family: var(--font-heading); letter-spacing: -0.01em; }

.pp-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; align-items: center; padding: 1.5rem 0 3rem; }
.pp-hero:has(#pp-shot[hidden]) { grid-template-columns: minmax(0, 40rem); }
.pp-eyebrow { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-red); font-weight: 700; margin: 0 0 .75rem; }
.pp-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.05; margin: 0 0 1rem; }
.pp-lede { font-size: 1.15rem; line-height: 1.55; color: var(--text-secondary); margin: 0 0 1.75rem; max-width: 32rem; }
.pp-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.pp-shot { margin: 0; position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #0b1220; aspect-ratio: 4 / 3; }
.pp-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1rem .8rem; color: #fff; font-size: .85rem; background: linear-gradient(transparent, rgba(11, 18, 32, .85)); }
@media (max-width: 52rem) { .pp-hero { grid-template-columns: 1fr; gap: 1.75rem; padding-bottom: 2rem; } }

.pp-btn { display: inline-block; padding: .8rem 1.35rem; border-radius: var(--radius-md); background: var(--accent-red); color: #fff; font: inherit; font-weight: 700; text-decoration: none; border: 1px solid var(--accent-red); cursor: pointer; line-height: 1.2; }
.pp-btn:hover, .pp-btn:focus-visible { filter: brightness(1.08); }
.pp-btn:focus-visible { outline: 2px solid var(--border-focus, var(--accent-blue)); outline-offset: 2px; }
.pp-btn-quiet { background: transparent; color: var(--text-primary); border-color: var(--border-strong, #c4ccd9); }
.pp-btn[disabled] { opacity: .6; cursor: default; }

.pp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0 0 4rem; align-items: stretch; }
.pp-plan { position: relative; display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.6rem 1.4rem 1.4rem; }
.pp-plan h2 { margin: 0; font-size: 1.15rem; }
.pp-for { margin: .15rem 0 1.1rem; color: var(--text-muted); font-size: .9rem; }
.pp-price { margin: 0; font-size: 2.6rem; line-height: 1; font-weight: 700; }
.pp-price span { font-family: var(--font-main); font-size: .95rem; font-weight: 400; color: var(--text-muted); margin-left: .2rem; }
.pp-setup { margin: .35rem 0 0; font-size: .85rem; color: var(--text-secondary); }
.pp-plan ul { list-style: none; margin: 1.3rem 0 1.5rem; padding: 0; flex: 1; }
.pp-plan li { position: relative; padding: .38rem 0 .38rem 1.5rem; font-size: .93rem; line-height: 1.4; color: var(--text-secondary); }
.pp-plan li::before { content: ''; position: absolute; left: .1rem; top: .72rem; width: .6rem; height: .32rem; border-left: 2px solid var(--accent-emerald); border-bottom: 2px solid var(--accent-emerald); transform: rotate(-45deg); }
.pp-plan .pp-btn { text-align: center; }
.pp-featured { background: #0b1220; border-color: #0b1220; color: #fff; }
.pp-featured .pp-for, .pp-featured .pp-price span { color: #9aa7bd; }
.pp-featured li { color: #cbd5e6; }
.pp-featured li::before { border-color: #4ade9b; }
.pp-badge { position: absolute; top: -.65rem; left: 1.4rem; margin: 0; background: var(--accent-red); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .6rem; border-radius: var(--radius-full); }
.pp-tag { font-family: var(--font-main); font-size: .65rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .15rem .45rem; border-radius: var(--radius-sm); background: var(--bg-inset); color: var(--text-secondary); vertical-align: middle; margin-left: .35rem; }

.pp-section { margin: 0 0 3.5rem; }
.pp-section > h2 { font-size: 1.7rem; margin: 0 0 1.2rem; line-height: 1.15; }
.pp-section h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
.pp-section p, .pp-facts dd { color: var(--text-secondary); line-height: 1.6; margin: 0; max-width: 40rem; }
.pp-steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; }
.pp-steps li { counter-increment: step; color: var(--text-secondary); line-height: 1.55; padding-top: 2.6rem; position: relative; border-top: 1px solid var(--border-subtle); }
.pp-steps li::before { content: counter(step); position: absolute; top: .7rem; left: 0; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--accent-red); }
.pp-steps strong { display: block; color: var(--text-primary); margin-bottom: .2rem; }
.pp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2.5rem; }
.pp-facts { margin: 0; display: grid; gap: 0; }
.pp-facts > div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--border-subtle); }
.pp-facts dt { font-weight: 700; }
@media (max-width: 40rem) { .pp-facts > div { grid-template-columns: 1fr; gap: .2rem; } }
.pp-muted { color: var(--text-muted); }

/* forms: the site's own field style */
.pp-form-block { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2rem; }
.pp-form-block > h2 { margin-top: 0; }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.1rem 1.25rem; }
#pp-form label, #ss-form label { display: block; font-size: .82rem; font-weight: 600; color: var(--text-primary); }
#pp-form input:not([type=checkbox]), #pp-form select, #pp-form textarea, #ss-form input:not([type=checkbox]), #ss-form select {
  display: block; width: 100%; margin-top: .35rem; padding: .7rem .75rem; background: var(--bg-inset); color: var(--text-primary); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); font: inherit; font-weight: 400; box-sizing: border-box; }
#pp-form input:focus-visible, #pp-form select:focus-visible, #pp-form textarea:focus-visible, #ss-form input:focus-visible, #ss-form select:focus-visible { outline: 2px solid var(--border-focus, var(--accent-blue)); outline-offset: 1px; }
#ss-form input[type=color] { height: 2.75rem; padding: .2rem; }
.pp-wide { margin-top: 1.1rem; }
.pp-check { margin: 1.25rem 0 !important; display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 400 !important; font-size: .88rem !important; color: var(--text-secondary) !important; line-height: 1.45; }
.pp-check input { margin-top: .2rem; flex: none; }
.pp-addr { display: flex; align-items: center; gap: .35rem; }
.pp-addr input { flex: 1; min-width: 0; }
.pp-addr b { font-weight: 500; color: var(--text-secondary); white-space: nowrap; font-size: .85rem; }
#ss-slug-msg { display: block; margin-top: .3rem; font-weight: 400; font-size: .8rem; }
#ss-slug-msg.ok { color: var(--accent-emerald); }
#ss-slug-msg.bad { color: var(--accent-red); }
.pp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pp-error { color: var(--accent-red); margin: 0 0 1rem; font-size: .9rem; }
.pp-done h3 { color: var(--accent-emerald); }
@media (max-width: 40rem) { .pp-form-block { padding: 1.25rem; } }

.pp-form-block [hidden] { display: none !important; }
.pp-form-block > .pp-muted { margin: 0 0 1.5rem; max-width: 38rem; }
.pp-check span a { color: var(--accent-blue-light); }
#ss-form input[type=color] { height: 2.5rem; }

.pp-title { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: .5rem 0 1.5rem; }
.pp-fine { color: var(--text-muted); font-size: .85rem; margin: -2rem 0 3rem; max-width: 44rem; }
.pp-narrow { max-width: 46rem; }
.pp-back { color: var(--text-secondary); text-decoration: none; font-size: .9rem; }
.pp-back:hover { color: var(--text-primary); }
.pp-pick { border: 0; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .75rem; }
.pp-pick label { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.1rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); cursor: pointer; }
.pp-pick label:has(input:checked) { border-color: var(--accent-red); box-shadow: 0 0 0 1px var(--accent-red); }
.pp-pick input { margin-top: .3rem; flex: none; accent-color: var(--accent-red); }
.pp-pick strong { display: block; font-family: var(--font-heading); }
.pp-pick small { display: block; color: var(--text-secondary); margin-top: .15rem; line-height: 1.4; }
.pp-sr { position: absolute; left: -9999px; }

/* intro line, and the collapsible feature list (always open on wide screens) */
.pp-intro { margin: -.4rem 0 1.6rem; color: var(--text-secondary); max-width: 38rem; line-height: 1.55; }
.pp-more summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--text-secondary); list-style: none; padding: .35rem 0; }
.pp-more summary::-webkit-details-marker { display: none; }
.pp-more summary::after { content: ''; display: inline-block; width: .45rem; height: .45rem; margin-left: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.pp-more[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.pp-featured .pp-more summary { color: #9aa7bd; }
@media (min-width: 40.01rem) { .pp-more summary { display: none; } }

/* phones: a compact list, the plan we recommend first, details tucked away */
@media (max-width: 40rem) {
  .pp-page { padding: 1.25rem 1rem 3rem; }
  .pp-title { font-size: 1.9rem; margin-bottom: 1rem; }
  .pp-intro { margin-bottom: 1.25rem; font-size: .95rem; }
  .pp-plans { gap: .85rem; margin-bottom: 1.5rem; }
  .pp-featured { order: -1; }
  .pp-plan { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: baseline; padding: 1.1rem 1.1rem 1rem; }
  .pp-plan h2 { grid-column: 1; grid-row: 1; font-size: 1.1rem; }
  .pp-plan .pp-price { grid-column: 2; grid-row: 1; font-size: 1.9rem; text-align: right; }
  .pp-plan .pp-price span { font-size: .8rem; }
  .pp-plan .pp-for { grid-column: 1 / -1; grid-row: 2; margin: .1rem 0 .2rem; font-size: .85rem; }
  .pp-plan .pp-setup { grid-column: 1 / -1; margin: 0 0 .2rem; font-size: .8rem; }
  .pp-plan .pp-more { grid-column: 1 / -1; margin: .4rem 0 .9rem; border-top: 1px solid var(--border-subtle); }
  .pp-featured .pp-more { border-color: rgba(255, 255, 255, .14); }
  .pp-plan ul { margin: .3rem 0 .2rem; }
  .pp-plan li { font-size: .9rem; padding: .3rem 0 .3rem 1.4rem; }
  .pp-plan li::before { top: .6rem; }
  .pp-plan > .pp-btn { grid-column: 1 / -1; padding: .8rem 1rem; }
  .pp-badge { left: 1.1rem; }
  .pp-fine { font-size: .8rem; margin: 0 0 2rem; }
}

/* Three plans across, and the Bespoke plan as one wide box under them, the same width as the three. Phones stack everything in one column. */
@media (min-width: 40.01rem) {
  .pp-plans > .pp-plan:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; grid-template-areas: "t m b" "f m b" "p m b" "s m b"; column-gap: 2.5rem; align-items: start; }
  .pp-plans > .pp-plan:last-child h2 { grid-area: t; }
  .pp-plans > .pp-plan:last-child .pp-for { grid-area: f; }
  .pp-plans > .pp-plan:last-child .pp-price { grid-area: p; }
  .pp-plans > .pp-plan:last-child .pp-setup { grid-area: s; }
  .pp-plans > .pp-plan:last-child .pp-more { grid-area: m; margin: 0; }
  .pp-plans > .pp-plan:last-child .pp-more ul { margin: 0; columns: 2; column-gap: 2rem; }
  .pp-plans > .pp-plan:last-child .pp-more li { break-inside: avoid; }
  .pp-plans > .pp-plan:last-child > .pp-btn { grid-area: b; align-self: center; white-space: nowrap; padding-left: 1.6rem; padding-right: 1.6rem; }
}
@media (max-width: 40rem) { .pp-plans { grid-template-columns: 1fr; } }

/* ---- colors and alignment pass ---- */
/* Buttons level across the row: the feature list takes the spare height, so every button sits at the bottom of its card. */
.pp-plan .pp-more { flex: 1 1 auto; }
.pp-plan > .pp-btn { margin-top: auto; }

/* Readable text: the palest gray is for decoration only, never for words people need to read. */
.pp-for, .pp-price span, .pp-setup, .pp-fine { color: var(--text-secondary); }
.pp-plan li { color: var(--text-primary); }
.pp-plan li::before { border-width: 2.5px; }

/* Cards that separate from the page. */
.pp-plan { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.pp-btn-quiet { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-strong); }
.pp-btn-quiet:hover, .pp-btn-quiet:focus-visible { background: var(--bg-inset); filter: none; border-color: var(--text-secondary); }

/* The recommended plan: the site's own deep navy, with a touch of the brand red in the glow. */
.pp-featured { background: linear-gradient(165deg, #0b1220 0%, #141d33 100%); border-color: #26324d; box-shadow: 0 14px 34px var(--accent-red-glow); }
.pp-featured .pp-for, .pp-featured .pp-price span { color: #b9c5da; }
.pp-featured li { color: #e6ecf7; }
.pp-featured li::before { border-color: #34d399; }
.pp-featured .pp-more summary { color: #b9c5da; }

/* Bespoke: its own identity in Bayside Blue, so it reads as the premium option without competing with the red action. */
.pp-plans > .pp-plan:last-child { border-left: 4px solid var(--accent-blue); background: linear-gradient(90deg, #f3f6ff 0%, var(--bg-surface) 38%); }
.pp-plans > .pp-plan:last-child .pp-btn-quiet { color: var(--accent-blue-light); border-color: var(--accent-blue); }
.pp-plans > .pp-plan:last-child .pp-btn-quiet:hover, .pp-plans > .pp-plan:last-child .pp-btn-quiet:focus-visible { background: var(--accent-blue); color: #fff; }
@media (max-width: 40rem) { .pp-plans > .pp-plan:last-child { border-left-width: 1px; border-top: 4px solid var(--accent-blue); background: var(--bg-surface); } }
@media (min-width: 40.01rem) { .pp-plans > .pp-plan:last-child > .pp-btn { margin-top: 0; align-self: center; } }

/* The recommended plan is a white card like the others, marked out by a red border, not a black box. */
.pp-featured { background: var(--bg-surface); color: var(--text-primary); border: 2px solid var(--accent-red); box-shadow: 0 10px 26px var(--accent-red-glow); }
.pp-featured .pp-for, .pp-featured .pp-price span { color: var(--text-secondary); }
.pp-featured li { color: var(--text-primary); }
.pp-featured li::before { border-color: var(--accent-emerald); }
.pp-featured .pp-more summary { color: var(--text-secondary); }
@media (max-width: 40rem) { .pp-featured .pp-more { border-color: var(--border-subtle); } }
@media (min-width: 40.01rem) { .pp-featured { padding: calc(1.6rem - 1px) calc(1.4rem - 1px) calc(1.4rem - 1px); } }

/* a little life on the plans */
.pp-plan { transition: transform .18s ease, box-shadow .18s ease; }
@media (hover: hover) { .pp-plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } }

/* sign-up form polish: readable intro, small color swatches */
.pp-form-block > .pp-muted, .pp-pick span, .pp-pick small { color: var(--text-secondary); }
#ss-form input[type=color], #pp-form input[type=color] { width: 4.5rem; height: 2.6rem; padding: .2rem; cursor: pointer; border-radius: var(--radius-md); }


/* ---- hero: dark band, the title, and a gallery of different cars. Photos are 640 x 480, so the frame never shows them larger than that. ---- */
.pp-hero2 { background: radial-gradient(120% 140% at 85% 0%, #2a1a3d 0%, #121a30 45%, #0b1220 100%); border-bottom: 3px solid var(--accent-red); color: #fff; }
.pp-hero2-in { max-width: 68rem; margin: 0 auto; padding: 2.6rem 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); gap: 3rem; align-items: center; }
.pp-kicker { display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; color: #ff7a96; font-weight: 700; }
.pp-kicker::before { content: ''; width: 2.6rem; height: 3px; background: var(--accent-red); border-radius: 2px; }
.pp-hero2 .pp-title { color: #fff; font-size: clamp(3.4rem, 9vw, 6.2rem); margin: 0 0 1.4rem; line-height: .95; letter-spacing: -.025em; }
.pp-now { margin: 0; min-height: 1.6em; color: #e6ecf7; font-family: var(--font-heading); font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-weight: 500; letter-spacing: -.005em; }
.pp-now::before { content: 'Pictured'; display: block; margin-bottom: .25rem; color: #8d9bb5; font-family: var(--font-main); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.pp-gallery { border-radius: var(--radius-lg); overflow: hidden; background: #0b1220; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .1); }
.pp-stage { position: relative; aspect-ratio: 16 / 10; background: #0b1220; }
.pp-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.pp-stage img.on { opacity: 1; }
.pp-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(3.4rem, 1fr); gap: 2px; background: #0b1220; overflow-x: auto; scrollbar-width: none; }
.pp-thumbs::-webkit-scrollbar { display: none; }
.pp-thumbs button { all: unset; box-sizing: border-box; cursor: pointer; position: relative; aspect-ratio: 4 / 3; overflow: hidden; opacity: .55; transition: opacity .2s; }
.pp-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-thumbs button:hover, .pp-thumbs button:focus-visible { opacity: .9; }
.pp-thumbs button[aria-selected="true"] { opacity: 1; box-shadow: inset 0 -3px 0 var(--accent-red); }
.pp-thumbs button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
@media (max-width: 52rem) { .pp-hero2-in { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 1.6rem; padding: 2rem 1.1rem; } .pp-hero2 .pp-title { font-size: clamp(3.2rem, 9vw, 4.4rem); } .pp-kicker { font-size: .8rem; } }
@media (max-width: 40rem) { .pp-hero2-in { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.8rem 1.1rem 1.9rem; } .pp-hero2 .pp-title { font-size: clamp(3.2rem, 15vw, 4.6rem); margin-bottom: 1rem; } .pp-gallery { max-width: 26rem; } .pp-kicker { font-size: .85rem; } }
@media (prefers-reduced-motion: reduce) { .pp-stage img { transition: none; } }
.pp-now:empty { display: none; }

.pp-from { margin: .6rem 0 0; font-size: 1.25rem; color: #fff; }
.pp-from strong { color: var(--accent-emerald, #34d399); font-size: 1.5rem; }
.pp-badge-low { background: var(--accent-emerald, #059669); }
@media (max-width: 640px) { .pp-from { font-size: 1.05rem; } .pp-from strong { font-size: 1.25rem; } }

/* Hero: the text column is as tall as the photo, and the car name sits at its bottom, level with the photo's bottom edge. */
@media (min-width: 40.01rem) {
  .pp-hero2-in { align-items: stretch; }
  .pp-hero2-text { display: flex; flex-direction: column; justify-content: flex-start; }
  .pp-hero2-text .pp-now { margin-top: auto; padding-top: 2rem; }
}

/* "From $15" line under the big Plans word: sized to read as part of the headline, with even spacing. */
.pp-hero2 .pp-title { margin-bottom: .5rem; }
.pp-hero2 .pp-from { margin: 0 0 1.6rem; font-family: var(--font-heading); font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: #fff; }
.pp-hero2 .pp-from strong { font-size: inherit; font-weight: 700; color: var(--accent-emerald, #34d399); }
.pp-hero2 .pp-from span { display: block; margin-top: .35rem; font-family: var(--font-main); font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: 400; color: #b9c5da; letter-spacing: 0; }
@media (max-width: 40rem) { .pp-hero2 .pp-title { margin-bottom: .4rem; } .pp-hero2 .pp-from { margin-bottom: 1.2rem; font-size: clamp(1.6rem, 7vw, 2rem); } }

/* No empty band under the photo: the photo keeps its own height and sits on the bottom of the row; the hero's bottom padding is trimmed. */
.pp-hero2 .pp-gallery { align-self: end; }
.pp-hero2-in { padding-bottom: 1.4rem; }
@media (max-width: 40rem) { .pp-hero2-in { padding-bottom: 1.2rem; } }

/* On phones the $15 Standard plan comes first, then the others in page order (the featured plan no longer jumps to the top). */
@media (max-width: 40rem) { .pp-featured { order: 0; } }