/* Overview landing page (pages/overview.md, routed at "/"), drawn after
   whatnot.com/careers: whatnotSans display headings over system-ui body text,
   full-width bands in Whatnot's yellow-500 and cream (brand-white), black pill
   buttons, and link rows under a black top rule like the careers page's
   principles list.

   Every rule is scoped to .wn-home, the page's wrapper. Scalar renders the
   page's raw HTML as editor nodes inside .t-editor, so its prose styles reach
   these elements: headings take .t-editor__heading, which headings.css sets
   at (0,2,1). The heading rules here match that specificity and this sheet is
   listed after headings.css in scalar.config.yaml, so they win the tie. */

@font-face {
  font-family: whatnotSans;
  src: url("/whatnot-sans-vf.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.wn-home {
  --wn-paper: #fffff4;
  --wn-ink: #000;
  --wn-muted: #545454;
  --wn-rule-strong: #000;
  --wn-rule: #d6d6d6;
  --wn-button: #1c1c1c;
  --wn-button-hover: #2d2d2d;
  --wn-button-color: #fff;
  --wn-focus: #0245f6;
  --wn-display: whatnotSans, system-ui, sans-serif;

  background: var(--wn-paper);
  color: var(--wn-ink);
  font-family:
    system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  line-height: 1.5;
}

/* Whatnot's careers page has no dark variant; dark mode keeps its layout on
   the theme's dark background with Whatnot's dark neutrals. The yellow band
   stays yellow with black text, as on whatnot.com. */
.dark-mode .wn-home {
  --wn-paper: var(--scalar-background-1);
  --wn-ink: #fffff4;
  --wn-muted: #959595;
  --wn-rule-strong: #fffff4;
  --wn-rule: #2d2d2d;
  --wn-button: #fffff4;
  --wn-button-hover: #d6d6d6;
  --wn-button-color: #000;
  --wn-focus: #3368f6;
}

/* Run the page edge to edge: the theme pads the editor and caps its width,
   and leaves space above the content and below the last node. */
.t-editor:has(.wn-home) {
  padding: 0;
  --scalar-container-width: 100%;
}

.t-editor:has(.wn-home) .content {
  margin-top: 0;
}

.t-editor:has(.wn-home) .page-node {
  padding-bottom: 0;
}

.t-editor .wn-home *,
.t-editor .wn-home *::before,
.t-editor .wn-home *::after {
  box-sizing: border-box;
}

/* Prose resets: the theme spaces paragraphs and lists and draws markers. */
.t-editor .wn-home :is(p, ol, ul, li) {
  margin: 0;
  padding: 0;
}

.t-editor .wn-home :is(ol, ul) {
  list-style: none;
}

.t-editor .wn-home li::marker,
.t-editor .wn-home li::before {
  content: none;
}

.t-editor .wn-home :where(a) {
  color: inherit;
  text-decoration: none;
}

/* The theme colours paragraphs, lists, links and bold text with its own text
   colour, set on each element, so they would ignore the band they sit in
   (dark text on the black band, light text on yellow in dark mode). */
.wn-home :is(.t-editor__paragraph, .t-editor__list, .t-editor__anchor, .t-editor__bold) {
  color: inherit;
}

.t-editor .wn-home :is(h1, h2, h3, h4) {
  margin: 0;
  color: inherit;
  font-family: var(--wn-display);
  font-weight: 700;
  letter-spacing: normal;
}

.wn-home :is(a, button):focus-visible {
  outline: 2px solid var(--wn-focus);
  outline-offset: 2px;
}

/* Content runs as wide as the footer's: layout.css's --wn-inset, which lines
   it up with the header's logo and Support button, and 24px below 1056px */
.wn-home .wn-container {
  padding: 0 var(--wn-inset, 24px);
}

/* Section bands: careers' py-20 */
.wn-home .wn-band {
  padding: 80px 0;
}

.wn-home .wn-band--paper {
  background: var(--wn-paper);
}

/* Yellow surfaces (the hero, which continues the yellow header, and the
   yellow bands) stay yellow with black text in both colour modes. */
.wn-home :is(.wn-hero, .wn-band--yellow) {
  --wn-ring: #fff;
  background: #ffe414;
  color: #000;
  --wn-rule-strong: #000;
  --wn-rule: rgba(0, 0, 0, 0.2);
  --wn-muted: rgba(0, 0, 0, 0.72);
  --wn-button: #1c1c1c;
  --wn-button-hover: #2d2d2d;
  --wn-button-color: #fff;
  --wn-focus: #0245f6;
}

/* Section headings: careers' 44px/48.4px whatnotSans */
.t-editor .wn-home .wn-band h2 {
  font-size: 44px;
  line-height: 1.1;
}

/* Heading on the left, a short grey note on the right ("Working & Whatnot") */
.wn-home .wn-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 64px;
}

.t-editor .wn-home .wn-head p {
  max-width: 400px;
  padding-top: 8px;
  color: var(--wn-muted);
  font-size: 14px;
  line-height: 20px;
}

/* Buttons: careers' pills, 16px/24px semibold */
.wn-home .wn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.t-editor .wn-home .wn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  transition: background-color 140ms ease, border-color 140ms ease;
}

/* Secondary: the primary's soft tint, Whatnot's transparent black 10% (the
   header's Support pill) */
.t-editor .wn-home .wn-btn--soft {
  background: #0000001c;
  color: #000;
}

.t-editor .wn-home .wn-btn--soft:hover {
  background: #0003;
}

.t-editor .wn-home .wn-btn--black {
  background: var(--wn-button);
  color: var(--wn-button-color);
}

.t-editor .wn-home .wn-btn--black:hover {
  background: var(--wn-button-hover);
}

/* Hero: one centred column on the yellow band that runs on from the header
   (header.css drops the header's bottom rule), with aave.com's hierarchy:
   a quiet product eyebrow, a 72px/1.1 headline, a 20px muted subtitle capped
   at 620px, two 48px pills (filled, then soft), and the quickstart panel
   below as the hero's visual. .wn-hero--split (further down) is the
   two-column variant. */
.wn-home .wn-hero {
  padding: 112px 0 96px;
}

.wn-home .wn-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wn-home .wn-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.t-editor .wn-home .wn-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(0, 0, 0, 0.72);
  font-family: var(--wn-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}

/* The logo's tile: the yellow w on neutral-900 */
.wn-home .wn-eyebrow__mark {
  display: inline-flex;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #282527;
  color: #ffe414;
}

.wn-home .wn-eyebrow__mark svg {
  width: 100%;
  height: 100%;
}

.wn-home .wn-eyebrow__tag {
  padding: 4px 10px;
  border-radius: 9999px;
  background: #0000001c;
  color: #000;
  font-family:
    system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

/* The theme makes headings flex rows, which would pin a short line to the
   left; a block lets text-align centre it */
.t-editor .wn-home .wn-hero h1 {
  display: block;
  max-width: 920px;
  margin-top: 20px;
  font-size: 72px;
  line-height: 1.1;
  text-wrap: balance;
}

.t-editor .wn-home .wn-lede {
  max-width: 620px;
  margin-top: 16px;
  color: var(--wn-muted);
  font-size: 20px;
  line-height: 27px;
}

.wn-home .wn-hero .wn-actions {
  justify-content: center;
  margin-top: 32px;
}

/* Split variant: the copy left-aligned on the left, the quickstart on the
   right, centred against it. The headline scales down until 1440px so
   "Build on Whatnot" stays on one line beside the code. */
.wn-home .wn-hero--split {
  padding: 196px 0;
}

.wn-home .wn-hero--split .wn-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
  text-align: left;
}

.wn-home .wn-hero--split .wn-hero__copy {
  align-items: flex-start;
}

.t-editor .wn-home .wn-hero--split .wn-eyebrow {
  justify-content: flex-start;
}

.t-editor .wn-home .wn-hero--split h1 {
  font-size: clamp(48px, 5vw, 72px);
}

.wn-home .wn-hero--split .wn-actions {
  justify-content: flex-start;
}

.wn-home .wn-hero--split .wn-quickstart {
  max-width: none;
  margin-top: 0;
}

.t-editor .wn-home .wn-hero--split .wn-quickstart__note {
  text-align: left;
}

/* Quickstart: Scalar's own code group (scalar-code-group in the page), the
   theme's tabbed code block, straight on the yellow band. The page wraps the
   block in the theme's dark-mode class, as the footer does, so it always
   uses the default theme's dark tokens. */
.wn-home .wn-quickstart {
  width: 100%;
  max-width: 760px;
  margin-top: 64px;
  text-align: left;
}

/* The yellow band's focus blue is 2.6:1 on the dark code block; Whatnot's
   dark-surface blue clears 3:1 */
.wn-home .wn-quickstart .dark-mode {
  --wn-focus: #3368f6;
}

.t-editor .wn-home .wn-quickstart__note {
  margin-top: 16px;
  color: var(--wn-muted);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

/* Link rows: careers' principles list, bold rows between 1px rules under a
   black top rule, each ending in a chevron. They keep the page's system-ui
   stack, the docs' font, rather than whatnotSans. */
.wn-home .wn-rows {
  border-top: 1px solid var(--wn-rule-strong);
}

.t-editor .wn-home .wn-rows li {
  border-bottom: 1px solid var(--wn-rule);
}

.t-editor .wn-home .wn-rows a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.wn-home .wn-rows svg {
  flex: none;
  width: 22px;
  height: 22px;
  transition: translate 140ms ease;
}

.wn-home .wn-rows a:hover svg {
  translate: 3px 0;
}

.wn-home .wn-rows a:hover > span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Why use the Seller API: careers' "Our Interview Process" layout, a short
   intro column beside six numbered points in two columns. Each number sits in
   a tilted ring, drawn here in CSS after careers' hand-drawn circle: white on
   a yellow band as on careers, Whatnot yellow on cream. */
.wn-home .wn-why {
  padding: 128px 0;
}

.wn-home .wn-why__inner {
  display: flex;
  gap: 96px;
}

.wn-home .wn-why__intro {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 24px;
  max-width: 36ch;
}

.t-editor .wn-home .wn-why h2 {
  max-width: 14ch;
}

.t-editor .wn-home .wn-why__intro p {
  font-size: 16px;
  line-height: 22px;
}

.t-editor .wn-home .wn-why__note {
  font-style: italic;
}

.t-editor .wn-home .wn-why__note a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.t-editor .wn-home .wn-why__list {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 64px;
  align-content: start;
}

.t-editor .wn-home .wn-why__list li {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.wn-home .wn-why__num {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
}

.wn-home .wn-why__num::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 41px;
  height: 53px;
  border: 3px solid var(--wn-ring, #ffe414);
  border-radius: 50%;
  translate: -50% -50%;
  rotate: 20deg;
  pointer-events: none;
}

.t-editor .wn-home .wn-why h3 {
  font-family: inherit;
  font-size: 18px;
  line-height: 23px;
}

.t-editor .wn-home .wn-why__list p {
  margin-top: 4px;
  font-size: 16px;
  line-height: 20px;
}

/* Browse the docs: three columns of link rows, a grey label over each list */
.wn-home .wn-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px;
  align-items: start;
}

.t-editor .wn-home h3.wn-columns__label {
  margin-bottom: 12px;
  color: var(--wn-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.t-editor .wn-home .wn-rows + h3.wn-columns__label {
  margin-top: 40px;
}

@media (max-width: 960px) {
  .wn-home .wn-hero--split .wn-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
}

@media (max-width: 767px) {
  .wn-home .wn-hero,
  .wn-home .wn-band {
    padding: 56px 0;
  }

  .wn-home .wn-why__inner {
    flex-direction: column;
    gap: 48px;
  }

  .t-editor .wn-home .wn-why__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .t-editor .wn-home .wn-hero h1 {
    font-size: 40px;
    line-height: 44px;
  }

  .t-editor .wn-home .wn-eyebrow {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 16px;
    line-height: 24px;
  }

  .t-editor .wn-home .wn-lede {
    font-size: 18px;
    line-height: 26px;
  }

  .wn-home .wn-quickstart {
    margin-top: 48px;
  }

  .t-editor .wn-home .wn-band h2 {
    font-size: 32px;
    line-height: 1.1;
  }

  .wn-home .wn-head {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 40px;
  }

  .wn-home .wn-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wn-home .wn-btn,
  .wn-home .wn-rows svg {
    transition: none;
  }
}