/* ---------------------------------------------------------------
   Any rule that sets `display` beats the browser's built-in
   [hidden] { display: none }. That has caused six separate bugs on this
   site — elements that were "hidden" but still on screen. One rule with
   !important ends the whole class of bug, rather than remembering to add
   a partner rule every time a new component sets display.
   --------------------------------------------------------------- */
[hidden] { display: none !important; }

:root {
  --ink: #020617;
  --panel: #0f172a;
  --panel-alt: #0b1220;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --emerald: #34d399;
  --emerald-strong: #10b981;
  --emerald-soft: rgba(16, 185, 129, 0.1);
  --emerald-border: rgba(16, 185, 129, 0.3);
  --radius: 1rem;
  --radius-sm: 0.65rem;
  --max-width: 72rem;
  --max-width-narrow: 42rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.5;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.wrap-narrow { max-width: var(--max-width-narrow); }
.center { text-align: center; }

h1, h2, h3, h4 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
}

.section-sub {
  max-width: 34rem;
  margin: 0.75rem auto 0;
  text-align: center;
  color: var(--text-muted);
}

.accent { color: var(--emerald); }

p { color: var(--text-muted); }

.muted { color: var(--text-muted); }
.small { font-size: 0.875rem; }
.tiny { font-size: 0.75rem; margin-top: 0.75rem; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(2, 6, 23, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  font-family: Georgia, serif;
}

.logo { font-size: 1.25rem; gap: 0.3rem; }

/* "Sell" sits in a green block, "YourDevice" runs on beside it. Auto width
   with padding rather than a fixed square, so a word fits properly. */
.logo-svg { flex: 0 0 auto; }

.logo-word { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }

.logo-sell { color: var(--emerald); }

.main-nav {
  display: none;
  gap: 2rem;
  font-size: 0.9rem;
}

.main-nav a {
  color: var(--text-muted);
  text-decoration: none;
}

.main-nav a:hover { color: var(--text); }

@media (min-width: 768px) {
  .main-nav { display: flex; }
}

.hamburger-wrap { position: relative; }

.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.6rem;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.hamburger-btn span {
  display: block;
  width: 1.5rem;
  height: 2.5px;
  background: var(--text);
  border-radius: 999px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hamburger-btn:hover { border-color: rgba(255, 255, 255, 0.35); }

.hamburger-btn.is-open span:nth-child(1) { transform: translateY(6.9px) rotate(45deg); }
.hamburger-btn.is-open span:nth-child(2) { opacity: 0; }
.hamburger-btn.is-open span:nth-child(3) { transform: translateY(-6.9px) rotate(-45deg); }

.hamburger-dropdown {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  min-width: 17rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--panel);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 30;
}

.hamburger-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hamburger-dropdown a {
  padding: 0.9rem 1rem;
  border-radius: 0.5rem;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
}

.hamburger-dropdown a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

/* Buttons */
.btn {
  display: inline-block;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--emerald-strong);
  color: var(--ink);
  padding: 0.75rem 2rem;
  font-size: 1rem;
}

.btn-primary:hover { background: var(--emerald); }

.btn-small { padding: 0.5rem 1.25rem; font-size: 0.875rem; }

.btn-ghost {
  padding: 0.75rem 2rem;
  font-size: 1rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border-strong);
}

.btn-ghost:hover { border-color: rgba(255,255,255,0.4); }

.btn-full { width: 100%; margin-top: 1.75rem; }

/* Hero */
.hero { padding: 5rem 0 6rem; }

.hero-compact { padding: 2.5rem 0 0.5rem; }
.hero-compact-title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  max-width: 32rem;
  margin: 0 auto;
  line-height: 1.2;
}

.hero-compact-sub {
  max-width: 30rem;
  margin: 0.75rem auto 0;
  font-size: 0.95rem;
}

.hero-compact-badges {
  margin: 1.1rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.25rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.hero-compact-badges span { white-space: nowrap; }

.section-tight-top { padding-top: 1.5rem; }

.hero-inner { text-align: center; }

.eyebrow {
  display: inline-block;
  margin: 0 auto 1rem;
  padding: 0.25rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--emerald-border);
  background: var(--emerald-soft);
  color: var(--emerald);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

h1 {
  max-width: 48rem;
  margin: 0 auto;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  line-height: 1.1;
}

.lede {
  max-width: 38rem;
  margin: 1.5rem auto 0;
  font-size: 1.125rem;
}

.hero-ctas {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

@media (min-width: 640px) {
  .hero-ctas { flex-direction: row; }
}

/* Sections */
.section { padding: 5rem 0; }
.section-alt { background: rgba(15, 23, 42, 0.4); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.card {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 2rem;
}

/* Steps */
.step-grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .step-grid { grid-template-columns: repeat(3, 1fr); }
}

.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--emerald-strong);
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 1rem;
}

.step-card h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }


/* Trust */
.trust-grid {
  margin-top: 3rem;
  display: grid;
  gap: 2rem;
}

@media (min-width: 640px) {
  .trust-grid { grid-template-columns: 1fr 1fr; }
}

.trust-grid h4 { font-size: 1.1rem; margin-bottom: 0.5rem; }

/* FAQ */
.faq-list {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 0.75rem;
  padding: 1.1rem 1.25rem;
}

.faq-item[open] { border-color: var(--emerald-border); }

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  float: right;
  color: var(--emerald);
}

.faq-item[open] summary::after { content: "\2212"; }

.faq-item p { margin: 0.75rem 0 0; }

/* Final CTA */
.final-cta {
  background: var(--emerald-soft);
  border-top: 1px solid var(--border);
}

.final-cta h2 { margin-bottom: 0.5rem; }
.final-cta .btn { margin-top: 2rem; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 0;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  color: var(--text-dim);
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .footer-inner { flex-direction: row; }
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
}
.footer-links a { color: var(--text-dim); text-decoration: none; }
.footer-links a:hover { color: var(--text-muted); }

/* Devices accepted */
.device-tabs {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.device-tab {
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--text);
  padding: 0.6rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.device-tab:hover { border-color: rgba(255,255,255,0.35); }

.device-tab.is-active {
  border-color: var(--emerald-strong);
  background: var(--emerald-strong);
  color: var(--ink);
}

.device-panel {
  margin-top: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 0 2rem;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  border-width: 0;
  transition: height 0.6s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1),
    padding 0.6s cubic-bezier(0.65, 0, 0.35, 1),
    margin-top 0.6s cubic-bezier(0.65, 0, 0.35, 1),
    border-width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.device-panel.is-open {
  margin-top: 2rem;
  padding: 2rem;
  opacity: 1;
  pointer-events: auto;
  border-width: 1px;
}

.device-panel-content h3 {
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
}

.device-panel-sub { margin: 0 0 1.5rem; text-align: left; }

.model-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

@media (min-width: 640px) {
  .model-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .model-grid { grid-template-columns: repeat(4, 1fr); }
}

.model-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.6rem;
  background: rgba(2, 6, 23, 0.4);
  color: var(--text);
  text-decoration: none;
  padding: 0.9rem 0.6rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.tile-icon {
  width: 2.75rem;
  height: 2.75rem;
}

.tile-photo {
  width: 100%;
  max-width: 6rem;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 0.5rem;
}

.model-tile:hover {
  border-color: var(--emerald-strong);
  background: var(--emerald-soft);
  color: var(--emerald);
}

/* Photo upload overlay */
.tile-photo-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

/* The pencil that swaps a device photo is an owner tool, not something a
   customer should see. Hidden by default; add ?edit to any page with
   tiles to bring them back. Kept in the markup rather than stripped so
   the tool still exists when it's wanted. */
.photo-edit-btn { display: none; }

body.photo-editing .photo-edit-btn { display: flex; }

.photo-edit-btn {
  position: absolute;
  bottom: -0.4rem;
  right: -0.4rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--emerald-strong);
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.6rem;
  text-align: center;
  cursor: pointer;
  padding: 0;
}

.photo-edit-btn:hover { background: var(--emerald); }

/* Product subpage */
.back-link {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
}

.back-link:hover { color: var(--text); }

.product-card {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
}

.product-photo-wrap {
  width: 10rem;
  margin: 0 auto 1.5rem;
}

.product-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.75rem;
  border: 1px solid var(--border-strong);
}

.product-card h1 {
  font-size: 1.75rem;
  margin-bottom: 0.4rem;
}

.product-form-grid {
  margin-top: 1.75rem;
  text-align: left;
}

.product-info-grid {
  margin-top: 2rem;
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .product-info-grid { grid-template-columns: 1fr 1fr; }
}

.product-info-grid .card { padding: 1.5rem; }
.product-info-grid h4 { margin-bottom: 0.5rem; font-size: 1rem; }

/* Product subpage — step flow */
.qstep {
  margin-top: 1.25rem;
  padding: 1.5rem;
}

.qstep h3 { font-size: 1.05rem; margin-bottom: 1rem; }

.qbtn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.qbtn {
  border-radius: 0.6rem;
  border: 1px solid var(--border-strong);
  background: rgba(2, 6, 23, 0.4);
  color: var(--text);
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.qbtn:hover { border-color: rgba(255,255,255,0.35); }

.qbtn.is-active {
  border-color: var(--emerald-strong);
  background: var(--emerald-soft);
  color: var(--emerald);
}

/* The condition text decides the price, so make it legible rather than
   fine print: full-size body text, in a panel, with the phrases that
   determine the grade picked out. */
.condition-desc {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--emerald);
  border-radius: 0.6rem;
  background: var(--panel-alt);
  font-size: 0.95rem;
  line-height: 1.55;
  color: #cbd5e1;
}

.condition-desc:empty { display: none; }

.condition-desc strong {
  color: var(--text);
  font-weight: 700;
}

/* Anything that could reduce the offer gets its own line and a warmer
   colour, so it isn't lost at the end of a sentence. */
.cond-note {
  display: block;
  margin-top: 0.5rem;
  color: #fbbf24;
  font-weight: 600;
  font-size: 0.9rem;
}

.not-eligible {
  margin-top: 1.25rem;
  padding: 1.5rem;
  border-color: rgba(248, 113, 113, 0.3);
}

.not-eligible h4 { color: #f87171; margin-bottom: 0.5rem; font-size: 1.05rem; }

.summary-card {
  margin-top: 1.25rem;
  padding: 1.5rem;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  font-size: 0.9rem;
}

@media (min-width: 480px) {
  .summary-grid { grid-template-columns: repeat(4, 1fr); }
}

#step-zip input {
  margin-top: 0.5rem;
  width: 100%;
}

/* Product subpage — two-column layout with sticky sidebar */
.wrap-wide { max-width: 68rem; }

.product-layout {
  display: grid;
  gap: 2rem;
  margin-top: 1rem;
}

@media (min-width: 900px) {
  .product-layout { grid-template-columns: 1fr 20rem; align-items: start; }
}

.product-questions { display: flex; flex-direction: column; }

.product-sidebar {
  position: static;
}

@media (min-width: 900px) {
  .product-sidebar { position: sticky; top: 5.5rem; }
}

.product-sidebar-card { text-align: center; padding: 1.75rem; }

.product-sidebar-card .product-photo-wrap {
  width: 13rem;
  margin: 0 auto 1.25rem;
}

.product-sidebar-card h1 {
  font-size: 1.35rem;
  margin-bottom: 1.25rem;
}

.product-sidebar-card .summary-grid {
  grid-template-columns: repeat(2, 1fr);
  text-align: left;
  margin-bottom: 1rem;
}

#price-placeholder { margin-top: 0.5rem; }

.sidebar-zip-card {
  margin-top: 1.25rem;
  text-align: left;
}

.sidebar-zip-card label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 0.4rem;
}

.sidebar-zip-card input { width: 100%; }

.quote-result {
  margin-top: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--emerald-border);
  background: var(--emerald-soft);
  padding: 1.25rem;
  text-align: left;
}

.quote-amount {
  margin: 0.25rem 0 0;
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--emerald);
  font-family: Georgia, serif;
}

/* Battery health slider */
.battery-slider {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.battery-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
}

.battery-slider-header span:first-child { color: #cbd5e1; font-weight: 600; }
.battery-slider-header span:last-child { color: var(--emerald); font-weight: 700; font-size: 1.1rem; }

#battery-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--emerald-strong) 0%,
    var(--emerald-strong) var(--battery-fill, 85%),
    rgba(255, 255, 255, 0.12) var(--battery-fill, 85%),
    rgba(255, 255, 255, 0.12) 100%
  );
  outline: none;
  cursor: pointer;
  margin: 0.3rem 0;
}

#battery-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--text);
  border: 3px solid var(--emerald-strong);
  cursor: grab;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

#battery-input::-webkit-slider-thumb:active { cursor: grabbing; }

#battery-input::-moz-range-thumb {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--text);
  border: 3px solid var(--emerald-strong);
  cursor: grab;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

#battery-input::-moz-range-track {
  height: 0.5rem;
  border-radius: 999px;
  background: transparent;
}

/* Smooth expanding sub-section within a question box */
.expand-wrap {
  height: 0;
  overflow: hidden;
  transition: height 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.expand-inner { padding-top: 1.25rem; }

.power-issue-block .expand-subhead {
  margin: 0 0 0.6rem;
  font-weight: 600;
  color: #cbd5e1;
}

.not-eligible-inline {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(248, 113, 113, 0.3);
}

.not-eligible-inline h4 { color: #f87171; margin-bottom: 0.5rem; font-size: 1.05rem; }

.accept-offer-choices {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.panel-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.support-note-section { padding: 2rem 0 4rem; }

.support-note {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
}

.support-note-link {
  color: var(--emerald);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid var(--emerald-border);
}

.support-note-link:hover {
  color: var(--emerald-strong);
  border-bottom-color: var(--emerald-strong);
}

/* Finalize sale page */
.finalize-card { padding: 2rem; }

.finalize-title {
  font-size: 1.6rem;
  margin: 0.4rem 0 0.5rem;
  line-height: 1.25;
}

.finalize-summary {
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--emerald-border);
  background: var(--emerald-soft);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* display:flex above beats the browser's default [hidden] rule, so the empty
   summary card would still render before any device data is filled in. */
.finalize-summary[hidden] { display: none; }

.finalize-device-photo {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border-radius: 0.6rem;
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
}

.finalize-summary-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.finalize-summary strong { font-size: 1.05rem; }

.finalize-summary-price {
  color: var(--emerald);
  font-weight: 700;
  font-size: 0.95rem;
  margin-top: 0.15rem;
}

.finalize-summary-details {
  margin-top: 0.1rem;
  font-weight: 700;
  color: #cbd5e1;
}

.finalize-form-section {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

.finalize-form-section:first-of-type {
  margin-top: 1.5rem;
  padding-top: 0;
  border-top: none;
}

.finalize-form-heading {
  font-size: 1rem;
  font-family: inherit;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 1.1rem;
}

.finalize-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

@media (min-width: 560px) {
  .finalize-form-grid { grid-template-columns: 1fr 1fr; }
  .finalize-field-full { grid-column: 1 / -1; }
}

.finalize-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.finalize-field span {
  font-size: 0.85rem;
  font-weight: 600;
  color: #cbd5e1;
}

.finalize-field input,
.finalize-field textarea {
  width: 100%;
  border-radius: 0.6rem;
  border: 1px solid var(--border-strong);
  background: var(--ink);
  color: var(--text);
  padding: 0.75rem 0.9rem;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.finalize-field input::placeholder,
.finalize-field textarea::placeholder { color: var(--text-dim); }

.finalize-field textarea { resize: vertical; min-height: 5rem; line-height: 1.5; }

.finalize-field input:focus,
.finalize-field textarea:focus {
  outline: none;
  border-color: var(--emerald-strong);
  background: rgba(16, 185, 129, 0.05);
}

.finalize-field input:invalid:not(:placeholder-shown) {
  border-color: rgba(248, 113, 113, 0.5);
}

.finalize-imei-help { margin: 0.9rem 0 0; }

.finalize-photos { margin-bottom: 1.75rem; }

.finalize-photos-label { margin-bottom: 0.75rem; font-weight: 600; color: #cbd5e1; }

.finalize-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.finalize-photo-slot {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--border-strong);
  border-radius: 0.75rem;
  background: rgba(2, 6, 23, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.finalize-photo-slot:hover { border-color: var(--emerald-strong); }

.finalize-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-align: center;
}

/* display:flex would otherwise beat the browser's default [hidden] rule, so
   the "+ Front" placeholder stayed on screen behind the uploaded preview and
   pushed it out of the slot. */
.finalize-photo-placeholder[hidden] { display: none; }

.finalize-photo-plus {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--emerald);
}

.finalize-photo-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.finalize-error { color: #f87171; margin-top: 0.75rem; }

.finalize-success {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--emerald-border);
  background: var(--emerald-soft);
  border-radius: 0.75rem;
}

.pf-contact-needed {
  margin-top: 1.5rem;
  border-top: none;
  padding-top: 0;
}

/* ---------------------------------------------------------------
   Content pages: legal, contact, guides, confirmation
   --------------------------------------------------------------- */

.legal-updated { margin-top: -0.5rem; }

.legal-lede { margin-bottom: 2.5rem; }

.legal-body h2 {
  font-size: 1.25rem;
  margin: 2.25rem 0 0.6rem;
  text-align: left;
}

.legal-body p,
.legal-body li { color: #cbd5e1; }

.legal-body ul {
  margin: 0.6rem 0 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.legal-body a,
.guide-list a,
.thanks-help a,
.contact-card a { color: var(--emerald); overflow-wrap: anywhere; }

.legal-notice {
  margin-top: 3rem;
  padding: 1.25rem;
  border: 1px solid var(--emerald-border);
  background: var(--emerald-soft);
  border-radius: 0.75rem;
}

.legal-notice h4 { margin: 0 0 0.5rem; }
.legal-notice p { margin: 0; }

.legal-date { color: var(--emerald); }

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 1rem;
  margin: 2rem 0 1rem;
}

@media (min-width: 768px) {
  .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Wider than the rest of this page: three columns inside the narrow
     wrap left each one too tight for an email address to sit on a line. */
  .contact-grid {
    width: min(52rem, 100vw - 2.5rem);
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

.contact-card h3 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.contact-card p { margin: 0 0 0.75rem; }
.contact-card > :last-child { margin-bottom: 0; }

.contact-link {
  font-weight: 700;
  text-decoration: none;
  font-size: 0.9rem;
  overflow-wrap: break-word;
}

.contact-address { margin: 0; font-size: 0.875rem; color: #cbd5e1; }

.contact-section-heading { text-align: left; margin: 2.75rem 0 0.75rem; }

/* Guides */
.guide-heading { font-size: 1.3rem; text-align: left; margin: 2.5rem 0 0.6rem; }

.guide-list {
  margin: 0.6rem 0 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  color: #cbd5e1;
}

.guide-note {
  margin: 2rem 0;
  padding: 1.25rem;
  border: 1px solid var(--emerald-border);
  background: var(--emerald-soft);
  border-radius: 0.75rem;
}

.guide-note h4 { margin: 0 0 0.5rem; }
.guide-note p { margin: 0; }

/* Confirmation page */
.thanks-mark {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--emerald-soft);
  border: 1px solid var(--emerald-border);
  color: var(--emerald);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.thanks-lede { margin-bottom: 1.5rem; }

.thanks-ref {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.75rem;
  background: var(--panel-alt);
  margin-bottom: 1.5rem;
}

.thanks-ref strong {
  font-size: 1.35rem;
  color: var(--emerald);
  letter-spacing: 0.03em;
}

.thanks-steps {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: #cbd5e1;
}

.thanks-steps strong { color: var(--text); display: block; }

.thanks-reminder {
  margin: 1.75rem 0;
  padding: 1.25rem;
  border: 1px solid var(--emerald-border);
  background: var(--emerald-soft);
  border-radius: 0.75rem;
}

.thanks-reminder h4 { margin: 0 0 0.5rem; }

.thanks-reminder ul {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.thanks-reminder p { margin: 0; }

.thanks-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1.5rem;
}

.thanks-help { margin-top: 1rem; }

/* Pre-shipping notice — deliberately louder than the other callout boxes,
   since the customer needs to have actually read this one. */
.thanks-warning {
  margin: 1.75rem 0;
  padding: 1.25rem;
  border: 1px solid rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.08);
  border-radius: 0.75rem;
}

.thanks-warning h4 {
  margin: 0 0 0.5rem;
  color: #f87171;
}

.thanks-warning p {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  color: #cbd5e1;
}

.thanks-warning p:last-child { margin-bottom: 0; }
.thanks-warning a { color: var(--emerald); }

/* Meetup version of the same box: informational, not a warning, because the
   customer is present and can walk away. */
.thanks-warning-soft {
  border-color: var(--emerald-border);
  background: var(--emerald-soft);
}

.thanks-warning-soft h4 { color: var(--emerald); }

/* A question they tried to skip past. Red, pulsing on the same 2.8s
   cycle as the prompt that pointed them here. Only border-color and
   background animate, so nothing re-lays-out mid-pulse. */
.qstep-missing {
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(248, 113, 113, 0.05);
  animation: qstep-missing-pulse 2.8s ease-in-out infinite;
  will-change: background-color;
}

@keyframes qstep-missing-pulse {
  0%,
  100% {
    border-color: rgba(248, 113, 113, 0.65);
    background: rgba(248, 113, 113, 0.08);
  }
  50% {
    border-color: rgba(248, 113, 113, 0.2);
    background: rgba(248, 113, 113, 0);
  }
}

/* Stop the pulse the moment they engage with that box. */
.qstep-missing:hover,
.qstep-missing:focus-within {
  animation: none;
  border-color: rgba(248, 113, 113, 0.75);
  background: rgba(248, 113, 113, 0.1);
}

.qstep-missing h3::after {
  content: " — required";
  color: #f87171;
  font-size: 0.8rem;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .qstep-missing { animation: none; }
}

/* "Show me what's missing" — yellow, with a slow pulse so it catches the
   eye without nagging. The animation eases both ways and never reaches
   full transparency, so it reads as a gentle breath rather than a flash.
   Opacity and colour only: nothing that triggers layout, so it stays
   smooth even on a slow phone. */
#pf-check {
  background: transparent;
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.5);
  animation: pf-check-pulse 2.8s ease-in-out infinite;
  will-change: opacity;
}

@keyframes pf-check-pulse {
  0%,
  100% {
    opacity: 1;
    border-color: rgba(251, 191, 36, 0.55);
    background: rgba(251, 191, 36, 0.05);
  }
  50% {
    opacity: 0.62;
    border-color: rgba(251, 191, 36, 0.22);
    background: rgba(251, 191, 36, 0);
  }
}

/* Stop pulsing while they're interacting with it — a button that keeps
   blinking under the cursor feels broken rather than helpful. */
#pf-check:hover,
#pf-check:focus-visible {
  animation: none;
  opacity: 1;
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.75);
}

/* Anyone who's asked their system not to animate gets a static button. */
@media (prefers-reduced-motion: reduce) {
  #pf-check {
    animation: none;
    background: rgba(251, 191, 36, 0.08);
  }
}

/* .btn sets display:inline-block, which beats the browser's built-in
   [hidden] rule — so a hidden button still rendered. Same trap as the
   flex containers elsewhere in this file. */
.btn[hidden] { display: none; }

/* .expand-wrap sets its own display, which beats the browser's [hidden]
   rule — without this the collapsed sell-method panel stays in the tab
   order even when it shouldn't be reachable. */
.expand-wrap[hidden] { display: none; }

/* ---------------------------------------------------------------
   Device switcher — sits above the photo on the product page
   --------------------------------------------------------------- */
.switcher {
  margin-bottom: 1.1rem;
  /* One tempo and one curve for every moving part in here. Mismatched
     durations were what made this feel loose even at a solid 60fps. */
  --sw-dur: 0.38s;
  --sw-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* A small centred pill, not a full-width bar — this is a secondary action
   sitting above the device they came here for. */
.switcher-toggle {
  display: block;
  margin: 0 auto;
  padding: 0.4rem 0.9rem;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim, #94a3b8);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.switcher-toggle:hover {
  border-color: var(--emerald-border);
  color: var(--emerald);
}

.switcher-toggle.is-open {
  border-color: var(--emerald-border);
  color: var(--emerald);
}

/* Category bubbles, same shape as the tabs on the device grid.
   Two layers share one box: the single chosen bubble, and the full row.
   Crossfading them means the bubbles only ever animate opacity and
   transform — both composited, neither triggers layout. The box's height
   is the one thing that reflows, and it gets a single transition.
   --------------------------------------------------------------- */
.switcher-cats {
  position: relative;
  padding-top: 0.75rem;
  overflow: hidden;
  transition: height var(--sw-dur) var(--sw-ease);
  will-change: height;
}

.cats-one,
.cats-all {
  will-change: opacity, transform;
  backface-visibility: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  transition:
    opacity calc(var(--sw-dur) * 0.55) linear,
    transform var(--sw-dur) var(--sw-ease);
}

/* The full row sits on top of the single bubble, so neither pushes the
   other around while they swap. */
.cats-all {
  position: absolute;
  top: 0.75rem;
  left: 0;
  right: 0;
}

/* Collapsed: the row is folded in toward the middle and invisible. */
.cats-all {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

.switcher-cats.is-open .cats-all {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.switcher-cats.is-open .cats-one {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

.switcher-cat {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.switcher-cat:hover { border-color: var(--emerald-border); }

.switcher-cat.is-current {
  background: var(--emerald-strong);
  border-color: var(--emerald-strong);
  color: var(--ink);
}

/* Each bubble lifts into place slightly after the one before it, so the
   row unfolds rather than appearing all at once. Transform only. */
.cats-all .switcher-cat {
  opacity: 0;
  transform: translateY(-6px) scale(0.85);
  transition:
    opacity calc(var(--sw-dur) * 0.5) linear,
    transform var(--sw-dur) var(--sw-ease);
}

.switcher-cats.is-open .cats-all .switcher-cat {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 22ms);
}

@media (prefers-reduced-motion: reduce) {
  .switcher-cats,
  .cats-one,
  .cats-all,
  .cats-all .switcher-cat { transition: none; }
  .switcher-cats.is-open .cats-all .switcher-cat { transition-delay: 0s; }
}

/* Text only — a second grid of photos here would fight with the device
   they're actually quoting. Capped short so opening it doesn't shove the
   price off the screen; it still scrolls by wheel, touch or keyboard, the
   scrollbar itself is just hidden. */
.switcher-list {
  margin-top: 0.6rem;
  max-height: 13rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* old Edge */
  overscroll-behavior: contain; /* don't drag the page once it bottoms out */
}

.switcher-list::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Without a scrollbar there's no hint more is below, so fade the bottom
   edge instead. */
.switcher-list::after {
  content: "";
  position: sticky;
  bottom: 0;
  height: 1.75rem;
  margin-top: -1.75rem;
  flex: 0 0 auto;
  pointer-events: none;
  background: linear-gradient(to top, var(--panel), transparent);
}

.switcher-item {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: #cbd5e1;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.switcher-item:last-child { border-bottom: none; }
.switcher-item:hover { background: var(--emerald-soft); color: var(--text); }

.switcher-item.is-current {
  color: var(--emerald);
  font-weight: 700;
  background: var(--emerald-soft);
  cursor: default;
}

/* Swapping category: fade the list out and back rather than cutting
   straight from one set of models to another. Opacity only. */

.switcher-list.is-swapping { opacity: 0; }

/* While the category bubbles are fanned out, the model list folds away so
   the two aren't fighting for the same space. Comes back as soon as a
   category is pressed — including pressing the current one again. */
.switcher-list {
  max-height: 13rem;
  transition:
    max-height var(--sw-dur) var(--sw-ease),
    opacity calc(var(--sw-dur) * 0.5) linear,
    margin-top var(--sw-dur) var(--sw-ease),
    border-width var(--sw-dur) var(--sw-ease);
}

.switcher-list.is-picking {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  border-width: 0;
  pointer-events: none;
}

/* While only the category bubbles are showing, the panel floats over the
   card rather than sitting in the flow — the device photo and everything
   under it stay exactly where they were. It drops back into the layout
   once a category is chosen and the model list needs the room. */
.switcher { position: relative; }

#switcher-panel.is-floating {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 6;
}

/* No backing needed now — the photo clears out of the way instead of the
   bubbles being laid on top of it. */
#switcher-panel.is-floating .switcher-cats {
  padding: 0.75rem 0.5rem 0.6rem;
}

/* The photo holds its space (so nothing below jumps) but fades back while
   the category bubbles occupy the same area. */
/* Everything describing the device being quoted fades as one while the
   customer is picking a different one. */
.product-photo-wrap,
#product-title,
.summary-grid,
#pf-result,
#pf-contact-needed,
#price-placeholder,
#pf-try,
#pf-check {
  transition: opacity var(--sw-dur, 0.38s) ease;
}

/* Opacity only — a scale here would nudge things a few pixels, and the
   whole point is that nothing moves at all. */
.is-behind {
  opacity: 0 !important;
  pointer-events: none;
}

/* Floating, the panel is only a positioning frame — let clicks through
   everywhere except the bubbles themselves, so the photo underneath
   stays reachable. */
#switcher-panel.is-floating { pointer-events: none; }
#switcher-panel.is-floating .switcher-cats { pointer-events: auto; }

/* Explains why a non-working device is quoted lower. Set as a quiet
   note rather than a warning — it's a normal part of the offer, not a
   problem with it. */
.quote-deduction {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.75rem;
  border-left: 2px solid var(--emerald-border);
  border-radius: 0 0.35rem 0.35rem 0;
  background: var(--emerald-soft);
  font-size: 0.8rem;
  line-height: 1.5;
  color: #cbd5e1;
  font-weight: 400;
}

.quote-deduction strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--text);
  font-weight: 700;
}

/* The issue row sits inside the power question, so when only that row is
   outstanding highlight the row alone — outlining the whole box would
   flag the powers-on question they've already answered. */
#power-issue-block.qstep-missing {
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(248, 113, 113, 0.55);
  border-radius: 0.6rem;
}

/* That block has a <p> heading rather than an h3, so the "required" tag
   needs to hang off the paragraph instead. */
#power-issue-block.qstep-missing .expand-subhead::after {
  content: " — required";
  color: #f87171;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Question cards carry a 1.25rem top margin, so the first one starts
   lower than the sidebar beside it. Match it, so the device card lines up
   with "Does it power on..." instead of floating above it. */
@media (min-width: 900px) {
  .product-sidebar { margin-top: 1.25rem; }
}

/* A question that no longer applies — greyed back rather than removed, so
   the customer can see it was considered and answered for them. */
.qstep-off {
  opacity: 0.45;
  pointer-events: none;
}

.qstep-off h3::after {
  content: " — not needed for an unlocked device";
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
}

/* Payment options that don't apply to this offer — shown, but plainly
   unavailable, so the limit is visible rather than mysterious. */
.qbtn.is-unavailable {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

.pay-note {
  margin-top: 0.75rem;
  color: #fbbf24;
}

/* ---------------------------------------------------------------
   Meetup arranging page
   --------------------------------------------------------------- */

/* The blacklist-check warning. Amber rather than red: it's an
   instruction to wait, not something that's gone wrong. */
.meet-alert {
  margin-top: 1.25rem;
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.06);
}

.meet-alert h3 {
  color: #fbbf24;
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}

.meet-alert p { margin: 0 0 0.6rem; font-size: 0.9rem; line-height: 1.6; }
.meet-alert p:last-child { margin-bottom: 0; }
.meet-alert strong { color: var(--text); }

.meet-choice-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.meet-choice {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: var(--panel-alt);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.meet-choice:hover { border-color: var(--emerald-border); }

.meet-choice.is-active {
  border-color: var(--emerald-strong);
  background: var(--emerald-soft);
}

.meet-choice-title { display: block; font-weight: 600; font-size: 0.95rem; }

.meet-choice-detail {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.meet-back { margin-top: 1.25rem; text-align: center; }

/* ZIP lookup on the meetup page */
.meet-zip-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.meet-zip-row input {
  flex: 1;
  min-width: 0;
  max-width: 10rem;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--text);
  font: inherit;
  padding: 0.6rem 0.75rem;
  letter-spacing: 0.08em;
}

.meet-zip-row input:focus { outline: none; border-color: var(--emerald); }
.meet-zip-row .btn { flex: 0 0 auto; padding: 0.6rem 1.1rem; }
.meet-zip-error { color: #f87171; margin-top: 0.5rem; }
.meet-zip-note { margin: 0.9rem 0 0; }

/* Revealed once a ZIP has been entered. */
.meet-places-panel {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.meet-places-panel.is-shown { opacity: 1; transform: none; }
.meet-places-panel[hidden] { display: none; }

/* Second heading inside the same card — needs breathing room above it
   that a card's own top padding would otherwise have provided. */
.meet-subheading {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* Two steps sharing one slot on the page. */
.meet-step {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.meet-step.is-shown { opacity: 1; transform: none; }
.meet-step[hidden] { display: none; }

.meet-back-step {
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 0.9rem;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.meet-back-step:hover { color: var(--emerald); }

/* Shown when a ZIP falls outside the meetup area. Framed as a redirect,
   not a rejection — mail-in pays the same and covers the whole country. */
.meet-outside {
  margin-top: 1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.06);
  border-radius: 0.7rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.meet-outside.is-shown { opacity: 1; transform: none; }
.meet-outside[hidden] { display: none; }

.meet-outside h4 {
  color: #fbbf24;
  font-size: 1rem;
  margin: 0 0 0.6rem;
}

.meet-outside p {
  margin: 0 0 0.7rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #cbd5e1;
}

.meet-outside .btn { margin-top: 0.3rem; }

/* Hold-off notice on the confirmation page — same treatment as the one on
   the arranging page, so the instruction reads as the same instruction. */
.thanks-hold { margin: 1.25rem 0 0; text-align: left; }

/* ---------------------------------------------------------------
   Order tracking
   --------------------------------------------------------------- */
.track-row input { max-width: 14rem; letter-spacing: 0.04em; }

.track-result {
  margin-top: 1.25rem;
  text-align: left;
}

.track-result h3 { margin: 0.75rem 0 0.5rem; font-size: 1.15rem; }
.track-result p { margin: 0 0 0.5rem; font-size: 0.92rem; line-height: 1.6; color: #cbd5e1; }

.track-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.track-badge-wait {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.track-badge-ok {
  background: var(--emerald-soft);
  color: var(--emerald);
}

.track-badge-no {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

.track-explain { line-height: 1.65; margin-bottom: 0.9rem; }

.track-legend {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.track-legend li {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.track-legend .track-badge { margin-right: 0.5rem; }

.thanks-track-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--emerald);
  text-decoration: none;
}

.thanks-track-link:hover { text-decoration: underline; }

/* Empty photo slots after a failed submit — same red treatment as an
   unanswered question on the quote page, so it reads the same way. */
.finalize-photo-slot.slot-missing {
  border-color: rgba(248, 113, 113, 0.65);
  background: rgba(248, 113, 113, 0.06);
}

/* A field that failed its check — same red as the photo slots. */
.finalize-field input.field-bad {
  border-color: rgba(248, 113, 113, 0.7);
  background: rgba(248, 113, 113, 0.06);
}

/* Tracking result, laid out like the order board we work from: photo,
   details, status. Same three columns, same reading order. */
.track-order {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 8.5rem;
  gap: 1.25rem;
  align-items: start;
  margin-top: 1.25rem;
  text-align: left;
}

/* No photo — reclaim its column so the details get the full width. */
.track-order.no-photo {
  grid-template-columns: minmax(0, 1fr) 8.5rem;
}

/* Wider than the narrow pages: the result card needs three columns, but
   not so wide that the paragraphs become hard to read. */
.wrap-track { max-width: 52rem; }

/* display:grid above beats the browser's [hidden] rule, so the empty card
   rendered before anyone had searched. Sixth time this trap has bitten on
   this site — any rule that sets display needs its own [hidden] partner. */
.track-order[hidden] { display: none; }

/* The first column is a fixed 110px, so if the photo fails to load the
   grid keeps its shape instead of collapsing the middle column into a
   narrow strip. min-width:0 on the middle column stops long words doing
   the same thing. */
.track-thumb {
  width: 110px;
  border-radius: 0.45rem;
  background: #fff;
}

.track-main { min-width: 0; }
.track-thumb[hidden] { display: none; }

.track-order h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }

.track-sub {
  margin: 0 0 0.7rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.track-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.18rem 0.8rem;
  margin: 0;
  font-size: 0.83rem;
}

.track-dl dt { color: var(--text-dim); white-space: nowrap; }
.track-dl dd { margin: 0; color: #cbd5e1; }

.track-body {
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #cbd5e1;
}

.track-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  text-align: right;
}

/* Three stages, left to right. */
.track-steps {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
  padding: 0;
}

.track-steps li {
  flex: 1;
  font-size: 0.75rem;
  color: var(--text-dim);
  text-align: left;
}

.track-steps li span {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: var(--border);
  margin-bottom: 0.4rem;
  transition: background-color 0.3s ease;
}

.track-steps li.is-done span { background: var(--emerald-strong); }
.track-steps li.is-done { color: var(--text-muted); }
.track-steps li.is-current span { background: #fbbf24; }
.track-steps li.is-current { color: #fbbf24; font-weight: 600; }
.track-steps li.is-bad span { background: #f87171; }
.track-steps li.is-bad { color: #f87171; font-weight: 600; }

@media (max-width: 640px) {
  .track-order { grid-template-columns: 1fr; }
  .track-side { align-items: flex-start; text-align: left; }
}

/* A field that failed its check — same red as the photo slots. */
.finalize-field input.field-bad {
  border-color: rgba(248, 113, 113, 0.7);
  background: rgba(248, 113, 113, 0.06);
}

/* Tracking result laid out like the order board we work from, so the
   customer sees the same shape of information we do. */
.track-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.track-ref-label { margin: 0 0 0.15rem; }

.track-ref-value {
  margin: 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}

/* Three stages, left to right. */
.track-steps {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  margin: 1.1rem 0 1.25rem;
  padding: 0;
}

.track-steps li {
  flex: 1;
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: left;
}

/* The bar above each label is the progress indicator. */
.track-steps li span {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: var(--border);
  margin-bottom: 0.45rem;
  transition: background-color 0.3s ease;
}

.track-steps li.is-done span { background: var(--emerald-strong); }
.track-steps li.is-done { color: var(--text-muted); }

.track-steps li.is-current span { background: #fbbf24; }
.track-steps li.is-current { color: #fbbf24; font-weight: 600; }

.track-steps li.is-bad span { background: #f87171; }
.track-steps li.is-bad { color: #f87171; font-weight: 600; }

/* Appeal route on a rejected sale. */
.track-appeal { margin-top: 1rem; }
.track-appeal[hidden] { display: none; }
.track-appeal .expand-wrap { height: 0; overflow: hidden; transition: height 0.4s cubic-bezier(0.32,0.72,0,1); }
.track-appeal .expand-inner { padding-top: 1rem; }
.track-appeal .finalize-field { margin-top: 0.85rem; }
.appeal-error { color: #f87171; margin: 0.6rem 0 0; }
.track-appeal .btn-primary { margin-top: 0.85rem; }

/* Appeal: the IMEI and photos we hold, shown back for checking. */
.appeal-head {
  margin: 1.4rem 0 0.4rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}

.appeal-head:first-of-type { margin-top: 0.5rem; }

.appeal-photos {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.appeal-photo {
  width: 8rem;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  padding: 0.5rem;
  background: var(--panel-alt);
  text-align: center;
}

.appeal-photo img {
  width: 100%;
  border-radius: 0.35rem;
  background: #fff;
  display: block;
}

.appeal-photo-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* A replaced photo is marked, so they can see at a glance which ones
   they've changed before sending. */
.appeal-photo.is-replaced {
  border-color: var(--emerald-strong);
  background: var(--emerald-soft);
}

.appeal-photo.is-replaced .appeal-photo-label {
  color: var(--emerald);
  font-weight: 600;
}

.appeal-replace {
  display: inline-block;
  margin-top: 0.45rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.appeal-replace:hover { border-color: var(--emerald-border); color: var(--emerald); }

.contact-link-inline { color: var(--emerald); text-decoration: none; font-weight: 600; }
.contact-link-inline:hover { text-decoration: underline; }

/* Carrier balance panel on the tracking page. Amber, not red — this is a
   question, not a rejection. */
.track-balance {
  margin-top: 1.1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.06);
  border-radius: 0.7rem;
}

.track-balance[hidden] { display: none; }

.track-balance h4 {
  margin: 0 0 0.6rem;
  color: #fbbf24;
  font-size: 0.98rem;
}

.track-balance p { margin: 0 0 0.7rem; font-size: 0.88rem; line-height: 1.6; color: #cbd5e1; }

.balance-row { display: flex; align-items: center; gap: 0.4rem; }

.balance-currency { font-size: 1rem; font-weight: 700; color: var(--text-muted); }

.balance-row input { max-width: 9rem; }

.balance-actions {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}

.balance-note { margin-top: 0.7rem; color: var(--emerald); }


/* On a wide screen the header and footer were pinned to the same narrow
   column as the body text, which pushed the logo a long way in from the
   edge and left the bar looking detached from its own background. Give
   both bars a wider cap above tablet size. Phones keep the original
   spacing, which was already right. */
@media (min-width: 900px) {
  .header-inner,
  .footer-inner {
    max-width: min(88rem, 100% - 4rem);
  }
}

/* Desktop navigation.
   The site was hamburger-only at every width. On a wide screen that hides
   the links behind a click for no reason — people expect to see where they
   can go. Links show inline above 900px and the hamburger takes over below,
   where space genuinely is tight. */
.desktop-nav { display: none; }

@media (min-width: 900px) {
  .desktop-nav {
    display: flex;
    align-items: center;
    gap: 1.6rem;
  }

  .desktop-nav a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.15s ease;
  }

  .desktop-nav a:hover { color: var(--text); }

  /* The quote is what the site is for, so it reads as a button rather
     than one more link in the row. */
  .desktop-nav .nav-cta {
    background: var(--emerald);
    color: #05221a;
    font-weight: 700;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
  }

  .desktop-nav .nav-cta:hover { background: var(--emerald-strong); color: #05221a; }

  .hamburger-btn { display: none; }
}