/*
 * Sell page hero — components/sell-hero.css
 *
 * The top of every /sell/<device> page: eyebrow, H1, two lines and a call
 * button on the left, the price calculator on the right. On phones the
 * calculator comes right under the H1, then the rest.
 *
 * Self-contained: it carries the shared tokens (cream page, system sans,
 * sell green) so it looks the same on pages that do not load
 * /components/shared.css. The calculator inside picks the tokens up.
 *
 * Markup, same on every page (only the device word changes):
 *   <section class="sell-hero" id="top" data-intent="sell">
 *     <div class="sh-grid">
 *       <p class="sh-eyebrow">...</p>
 *       <h1>Sell Your <Device> in Detroit. <span>Get Cash Today.</span></h1>
 *       <p class="sh-lead">...</p>
 *       <div class="sh-actions"><a class="sh-call" href="tel:13139001032">...</a></div>
 *       <div class="sh-calc" id="calculator"><div class="icalc" data-device="..."></div></div>
 *     </div>
 *   </section>
 */
.sell-hero {
  --page: #eeeae2; --page-2: #f5f2ec; --card: #ffffff; --divider: #e8e4dc;
  --ink: #221f1b; --sub: #5f5a51; --muted: #6e685d;
  --green: #1f7a3e; --green-wash: #eaf4ec; --green-line: #cfe5d6;
  --teal: #2b6f8f; --quote: #676d78;
  --accent: var(--green); --accent-ink: #18632f; --accent-wash: var(--green-wash); --accent-line: var(--green-line);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  padding: 56px 24px 64px;
}
.sell-hero *, .sell-hero *::before, .sell-hero *::after { box-sizing: border-box; }

.sell-hero .sh-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  grid-template-areas:
    "eyebrow calc"
    "title   calc"
    "lead    calc"
    "actions calc"
    ".       calc";
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: 56px;
  align-items: start;
}
.sell-hero .sh-eyebrow { grid-area: eyebrow; margin: 48px 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sub); }
.sell-hero h1 { grid-area: title; margin: 0 0 18px; font-family: var(--font); font-size: 46px; line-height: 1.08; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.sell-hero h1 span { display: block; color: var(--accent); }
.sell-hero .sh-lead { grid-area: lead; margin: 0 0 26px; max-width: 30em; font-size: 17px; line-height: 1.6; color: var(--sub); }
.sell-hero .sh-lead strong { color: var(--ink); font-weight: 600; }
.sell-hero .sh-actions { grid-area: actions; }
.sell-hero .sh-call {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font: 600 16px/1 var(--font); text-decoration: none;
  transition: background .15s ease;
}
.sell-hero .sh-call:hover { background: var(--accent-ink); }
.sell-hero .sh-call:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sell-hero .sh-calc { grid-area: calc; width: 100%; }
.sell-hero .sh-calc .icalc { max-width: 100%; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(34, 31, 27, .06), 0 12px 32px rgba(34, 31, 27, .08); }

@media (max-width: 960px) {
  .sell-hero { padding: 28px 16px 40px; }
  .sell-hero .sh-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "calc" "eyebrow" "lead" "actions";
    grid-template-rows: none;
    max-width: 600px;
  }
  .sell-hero h1 { font-size: 30px; margin-bottom: 18px; }
  .sell-hero h1 span { display: inline; }
  .sell-hero .sh-eyebrow { margin: 26px 0 10px; }
  .sell-hero .sh-lead { font-size: 16px; margin-bottom: 20px; }
}
@media (max-width: 520px) {
  .sell-hero { padding: 22px 0 36px; }
  .sell-hero h1, .sell-hero .sh-eyebrow, .sell-hero .sh-lead, .sell-hero .sh-actions { padding: 0 16px; }
  .sell-hero h1 { font-size: 27px; }
  .sell-hero .sh-calc .icalc { border-radius: 0; box-shadow: none; }
}