/* ==========================================================================
   EduNav — index.html page stylesheet
   --------------------------------------------------------------------------
   Loaded AFTER assets/css/style.css. Nothing here duplicates a class the main
   stylesheet already defines — every selector below is either a genuinely new
   homepage component (prefixed `.home-`) or a `.home-*` scoped override of an
   existing grid. No `style=""`, no `all: unset`, no new colour literals outside
   the token set in DESIGN-SPEC.md § 2.

   01  Hero vacancy strip      .home-jobs*
   02  Compact AI banner       .home-ai*
   03  Map search banner      .home-map*
   04  Vacancy cards           .home-vac*
   05  Photo slots             .home-ann-thumb
   06  Media queries
   07  Reduced motion
   ========================================================================== */


/* ==========================================================================
   01  HERO VACANCY STRIP  —  the deliberate exception to the reference hero
   --------------------------------------------------------------------------
   The reference hero carries two cards. The vacancy route stays, but not as a
   third tile: it is a full-width strip under the pair — a solid ink counter
   block holding the open-position number in brand yellow, then a live ticker
   that rolls the four current openings. It reads as instrumentation, not as a
   card, so it cannot compete with `.hero-card--school` / `.hero-card--kg`.
   `.hero-cards` is a 2-column grid, so the strip claims the whole row itself.
   ========================================================================== */

.home-jobs {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--line-5);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: 0 18px 40px -30px rgba(15, 20, 32, .4);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* Lift and shadow only. The border stays as authored — darkening it on hover
   drew a hard outline around the whole strip, which read as a box rather than
   as a raised surface. The keyboard focus ring below is a separate concern and
   must stay: it is the only affordance a non-mouse user gets. */
.home-jobs:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 52px -28px rgba(15, 20, 32, .45);
}
.home-jobs:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* --- the counter block --------------------------------------------------- */
.home-jobs-count {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-sizing: border-box;
  width: 98px;
  padding: 16px 10px;
  background: linear-gradient(150deg, #0F1420 0%, #243049 100%);
}
.home-jobs-num {
  display: block;
  font-family: var(--font-head);
  font-size: 31px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--brand);
}
.home-jobs-unit {
  display: block;
  max-width: 68px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, .62);
}

/* --- the live side ------------------------------------------------------- */
.home-jobs-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px 15px 18px;
  background: var(--brand-soft);
}
.home-jobs-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.home-jobs-live {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-dark);
}
.home-jobs-dot {
  flex: none;
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-deep);
  animation: edu-blink 1.7s ease-in-out infinite;
}

/* The ticker: a 5-item tape (4 openings + a repeat of the first) rolled one
   line at a time inside a single-line viewport. Purely decorative — the same
   information is exposed to assistive tech by the `.sr-only` sibling. */
.home-jobs-ticker {
  position: relative;
  display: block;
  height: 22px;
  min-width: 0;
  overflow: hidden;
}
.home-jobs-tape {
  display: block;
  animation: home-jobs-roll 15s var(--ease) infinite;
}
.home-jobs-item {
  display: block;
  height: 22px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 22px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-jobs-org {
  font-weight: 500;
  color: var(--text);
}
.home-jobs-org::before {
  content: "·";
  margin: 0 6px;
  color: var(--muted-3);
}

.home-jobs-go {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--brand);
  transition: transform .2s var(--ease);
}
.home-jobs-go svg { width: 15px; height: 15px; }
.home-jobs:hover .home-jobs-go { transform: translateX(4px); }

@keyframes home-jobs-roll {
  0%,   18%  { transform: translateY(0); }
  25%,  43%  { transform: translateY(-20%); }
  50%,  68%  { transform: translateY(-40%); }
  75%,  93%  { transform: translateY(-60%); }
  100%       { transform: translateY(-80%); }
}


/* ==========================================================================
   02  COMPACT AI BANNER
   --------------------------------------------------------------------------
   The reference collapses the AI helper to one dark row: icon · kicker ·
   headline with the accent word in brand yellow · pill · one supporting line ·
   yellow CTA. The 4-step wizard itself lives on in `.modal[data-modal="wizard"]`
   which the CTA opens (`[data-wizard-open]`, handled by app.js Wizard.init).
   Everything below only tightens `.banner-dark` — it adds no new banner parts
   beyond the leading icon.
   ========================================================================== */

.home-ai .banner-inner {
  /* Three columns, not one stack: the call to action sits beside the copy so
     the block stays a strip between two heavy sections instead of a panel. */
  gap: 16px;
  padding: 15px 20px;
  align-items: center;
}

.home-ai-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-lg);
  background: var(--kg-ink);
  color: var(--brand);
  box-shadow: 0 12px 24px -14px rgba(26, 24, 64, .7);
}
/* The frame-and-letters glyph needs room: below ~26px the "AI" closes up. */
.home-ai-icon svg { width: 28px; height: 28px; }

.home-ai .banner-title {
  margin-top: 5px;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.24;
  max-width: 620px;
}

/* Naming the inputs is what makes the offer legible — "4 sual" alone never
   told anyone what the assistant weighs. */
.home-ai-can {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 9px 0 0;
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1;
}
.home-ai-lab {
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--kg-text);
}
.home-ai-can > span:not(.home-ai-lab) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .62);
  font-weight: 600;
  color: var(--kg-ink);
}
.home-ai-can > span:not(.home-ai-lab)::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-deep);
}

.home-ai-act {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}
.home-ai-meta {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--kg-text);
}

@media (max-width: 768px) {
  /* The action column drops under the copy, but the icon stays on the title
     line — a 48px badge above a full-width block reads as an orphan. */
  .home-ai .banner-inner { flex-wrap: wrap; padding: 14px 16px; }
  .home-ai-icon { align-self: flex-start; }
  .home-ai-act { flex-basis: 100%; flex-direction: row; justify-content: space-between; }
  .home-ai-act .btn-brand { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   03  MAP SEARCH BANNER  —  the connector between the two catalogue grids
   --------------------------------------------------------------------------
   Brand yellow, because the page has already spent lavender on the AI strip
   and near-black on both promo banners; a fourth surface in either of those
   would read as a repeat rather than a new beat. Ink on #FFC629 measures
   13.4:1, so the whole strip can carry copy without a panel behind it.

   The strip is one <a>. The map page owns the geolocation control, so this
   needs no button, no second target and no JavaScript.
   ========================================================================== */

.home-map {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 22px 14px 14px;
  border-radius: var(--r-lg);
  background: linear-gradient(102deg, #FFD75E 0%, var(--brand) 52%, #FFE29A 100%);
  color: var(--ink);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.home-map:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 48px -30px rgba(176, 137, 31, .85);
}
.home-map:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* The drawing is the banner's only decoration, so it gets a light ground of
   its own rather than a tile — a boxed figure would echo the promo banner's
   photo slot two sections down. */
.home-map-fig {
  flex: none;
  display: block;
  width: 152px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .58);
  color: var(--ink);
}
.home-map-fig svg { display: block; width: 100%; height: auto; }

.home-map-copy { flex: 1 1 auto; min-width: 0; }
.home-map .kicker { color: var(--ink); }

.home-map-title {
  margin-top: 6px;
  font-family: var(--font-head);
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.024em;
  color: var(--ink);
  text-wrap: pretty;
}
/* An underline rather than a colour switch: every hue that would read as
   emphasis on brand yellow fails contrast against it. */
.home-map-title em {
  font-style: normal;
  background: linear-gradient(transparent 62%, rgba(255, 255, 255, .72) 62%);
}

.home-map-sub {
  display: block;
  margin-top: 7px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 62ch;
}

.home-map-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition: transform .18s var(--ease);
}
.home-map:hover .home-map-go { transform: translateX(3px); }



/* ==========================================================================
   04  VACANCY CARDS
   --------------------------------------------------------------------------
   The reference shows four vacancies side by side instead of four rows. Same
   payload as `.vac-row` (vəzifə · müəssisə · rayon · maaş · ştat · Müraciət et)
   and the same ink-block/brand-number signature as the hero strip, so the two
   blocks read as one family. `.vac-icon` and its colour variants are reused
   from the main stylesheet — only the card shell is new.
   ========================================================================== */

.home-vac {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.home-vac:hover {
  border-color: var(--line-5);
  box-shadow: var(--sh-2);
  transform: translateY(-3px);
}
.home-vac:focus-within { border-color: var(--ink-3); }

.home-vac-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.home-vac-title {
  font-family: var(--font-head);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.019em;
  color: var(--ink);
  text-wrap: pretty;
}
.home-vac-org {
  margin-top: 7px;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-2);
}
.home-vac-loc {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--muted);
}
.home-vac-loc svg { flex: none; width: 14px; height: 14px; }

.home-vac-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
}

/* the ink pill echoes `.home-jobs-count` — brand figure on ink */
.home-vac-salary {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  background: var(--ink);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.018em;
  color: var(--brand);
  white-space: nowrap;
}
.home-vac-cur {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .58);
}

.home-vac .btn-ghost { flex: none; }


/* ==========================================================================
   05  PHOTO SLOTS
   --------------------------------------------------------------------------
   The reference puts photographs in the promo banner, the CTA banner, the
   announcement rows and both ad rails. `.ecard-media`, `.news-thumb`,
   `.blog-thumb` and `.blog-card--feature` already accept an <img> through the
   main stylesheet; these three are the slots it does not cover.
   ========================================================================== */


/* announcement rows get the same thumbnail treatment as `.news-card` */
.home-ann-thumb {
  position: relative;
  flex: none;
  width: 78px;
  height: 60px;
  border-radius: var(--r-xxs);
  overflow: hidden;
  background: var(--line-2);
}
.home-ann-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* ==========================================================================
   06  MEDIA QUERIES
   ========================================================================== */

/* -------------------------------------------------------------- ≤1024px -- */
@media (max-width: 1024px) {
  /* the brief asks the vacancy grid to step 4 → 2 → 1, not 4 → 3 → 2 → 1 */
  .grid-4.home-vac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .home-map { gap: 16px; padding: 13px 16px 13px 13px; }
  .home-map-fig { width: 120px; }

  .home-ai .banner-inner { padding: 14px 16px; gap: 13px; }
  .home-ai-icon { width: 44px; height: 44px; border-radius: var(--r-sm); }
  .home-ai-icon svg { width: 26px; height: 26px; }
}

/* --------------------------------------------------------------- ≤768px -- */
@media (max-width: 768px) {
  /* The drawing and the copy keep the first row; the pill drops full width
     under them, which keeps the tap target comfortable without stacking three
     centred blocks. */
  .home-map { flex-wrap: wrap; gap: 12px; }
  .home-map-fig { width: 96px; padding: 6px 8px; }
  /* `flex: 1 1 auto` sizes from content, which is wider than the row that is
     left once the figure is placed — the copy would drop to its own line and
     leave the drawing stranded on an empty row. */
  .home-map-copy { flex: 1 1 0; }
  .home-map-go { flex-basis: 100%; justify-content: center; padding: 12px 16px; }

  .home-jobs-count { width: 86px; padding: 14px 8px; }
  .home-jobs-num { font-size: 27px; }
  .home-jobs-main { gap: 12px; padding: 13px 13px 13px 15px; }

  .home-vac { padding: 16px 16px 14px; }
}

/* --------------------------------------------------------------- ≤560px -- */
@media (max-width: 560px) {
  .grid-4.home-vac-grid { grid-template-columns: minmax(0, 1fr); }

  .home-map-fig { width: 78px; }
  .home-map-sub { font-size: 12.5px; }

  .home-jobs-count { width: 76px; }
  .home-jobs-num { font-size: 25px; }
  .home-jobs-unit { font-size: 9px; letter-spacing: .12em; }
  .home-jobs-item { font-size: 12.5px; }
  .home-jobs-go { width: 36px; height: 36px; }

  .home-ann-thumb { width: 64px; height: 52px; }

  .home-vac-foot { padding-top: 14px; }
  .home-vac .btn-ghost { flex: 1 1 100%; justify-content: center; }
}


/* ==========================================================================
   07  REDUCED MOTION
   The global block in style.css already clamps every duration, but the ticker
   depends on its transform for meaning — pin it to the first opening instead.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .home-jobs-tape { animation: none; transform: none; }
  .home-jobs-dot { animation: none; opacity: 1; }
  .home-jobs:hover,
  .home-vac:hover { transform: none; }
  .home-jobs:hover .home-jobs-go { transform: none; }
}

/* --- 02b  AI banner on the lavender ground -------------------------------
   The block moved from .banner-dark to .banner-soft (the kindergarten accent
   already in the token set), so the pieces that were tuned for a dark ground
   need re-tuning: the pill was light-on-dark, and the decorative blobs are
   inherited from .banner-soft and must not be re-declared here. */
/* Ink on a yellow highlight instead of yellow ink — yellow text on lavender
   sits near 1.1:1, which is unreadable however good it looks. */
.home-ai .banner-title em {
  color: var(--kg-ink);
  background: linear-gradient(transparent 58%, var(--brand) 58%);
  padding: 0 4px;
  border-radius: var(--r-pill);
}


/* ==========================================================================
   Hero cards — photo on top, white body, count + go button.
   Replaces the flat gradient tiles. The photo is a real <img> rather than a
   background so it can be lazy-hinted, sized, and given alt text; when the
   setting is empty the card falls back to its tinted ground.
   ========================================================================== */

.hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* No inner padding: the photo bleeds to the card edge, so the card itself
     does the clipping and there is no white frame around the image. */
  padding: 0;
  /* No border either — a hairline round the photo is exactly the edge the
     client asked to remove. Depth comes from the shadow instead. */
  border: 0;
  border-radius: var(--r-xl);
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  box-shadow: 0 24px 50px -34px rgba(15, 20, 32, .45);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease);
}
.hero-card:hover { transform: translateY(-4px); box-shadow: 0 34px 62px -32px rgba(15, 20, 32, .5); }
.hero-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* the photo slot */
.hero-card-shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 0;
  overflow: hidden;
  background: var(--surface-2);
}
.hero-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* icon badge floating over the top-left corner of the photo */
.hero-card-icon {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-lg);
  box-shadow: 0 10px 22px -12px rgba(15, 20, 32, .6);
}
.hero-card--school .hero-card-icon { background: var(--brand); color: var(--ink); }
.hero-card--kg     .hero-card-icon { background: var(--kg);    color: var(--kg-ink); }

.hero-card-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 20px 20px;
}
.hero-card-title {
  font-family: var(--font-head);
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.026em;
  color: var(--ink);
  text-wrap: balance;
}
.hero-card-sub {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
  max-width: 30ch;
}
.hero-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.hero-card-count {
  display: inline-flex;
  align-items: center;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hero-card-go {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  transition: transform .2s var(--ease);
}
.hero-card--school .hero-card-go { background: var(--brand); color: var(--ink); }
.hero-card--kg     .hero-card-go { background: var(--ink);   color: #fff; }
.hero-card:hover .hero-card-go { transform: translateX(3px); }

/* Soft blobs behind the pair, as in the reference — decorative only. */
.hero-cards { position: relative; }
.hero-cards::before,
.hero-cards::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 190px;
  height: 190px;
  /* Solid fills, unlike the blurred glows elsewhere — so these two follow the
     square rule instead of staying the only circles on the page. */
  border-radius: 50%;
  pointer-events: none;
}
.hero-cards::before { left: -70px;  bottom: 40px; background: rgba(255, 198, 41, .30); }
.hero-cards::after  { right: -60px; top: 30px;    background: rgba(200, 198, 244, .40); }

@media (max-width: 560px) {
  .hero-card { padding: 0; border-radius: var(--r-xl); }
  .hero-card-body { padding: 16px 16px 18px; }
  .hero-card-shot { aspect-ratio: 16 / 9; }
  .hero-card-icon { width: 40px; height: 40px; border-radius: var(--r-sm); }
  .hero-card-go { width: 42px; height: 42px; }
  .hero-cards::before, .hero-cards::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-card:hover { transform: none; }
  .hero-card:hover .hero-card-go { transform: none; }
}

/* style.css still ships the old tinted-tile rules for the two modifiers, and a
   modifier outranks the plain `.hero-card` above. Neutralise just the paint —
   the card is a white surface now and the tint lives on the icon and the go
   button instead. */
.hero-card--school,
.hero-card--kg {
  background: var(--bg);
  color: var(--ink);
  min-height: 0;
  border: 0;
  overflow: hidden;
}
.hero-card--school:hover,
.hero-card--kg:hover { box-shadow: 0 34px 62px -32px rgba(15, 20, 32, .5); }
.hero-card--school .hero-card-title,
.hero-card--kg .hero-card-title,
.hero-card--school .hero-card-sub,
.hero-card--kg .hero-card-sub { color: inherit; }
.hero-card--school .hero-card-sub,
.hero-card--kg .hero-card-sub { color: var(--text); }


/* ==========================================================================
   08  SEARCH ABOVE THE HERO
   The search opens the page, so it needs less air above it than a mid-page
   section would, and almost none below — it and the headline read as one
   block rather than two stacked bands.
   ========================================================================== */

/* The search no longer sits between the header and the headline, so the hero
   has to open that distance itself. */
.hero-bg .hero { padding-top: 58px; }

/* The headline holds the top of its column and the lead drops to the bottom,
   so the sentence lines up with the foot of the vacancy strip opposite it
   instead of floating in the middle of a taller column. Only from 1025px —
   below that style.css stacks the two columns and there is no height to fill. */
@media (min-width: 1025px) {
  .hero-copy { justify-content: flex-start; gap: 0; }
  .hero-copy .lead { margin-top: auto; padding-top: 22px; }
}

/* --- softened search bar --------------------------------------------------
   The bar sat above the headline in brand yellow twice over — a glow behind it
   and a solid submit — and won the page against the thing it was introducing.
   It now sits under the hero, and its one remaining accent is ink rather than
   brand: still obviously the button, no longer the loudest colour on screen.
   Scoped to the homepage so /axtar and 404, where the bar IS the page, stay
   bold. */

#home-search .search-glow {
  height: 150px;
  background: radial-gradient(ellipse at center, rgba(255, 198, 41, .10) 0%, rgba(255, 198, 41, 0) 74%);
}

#home-search .searchbar {
  border-color: var(--line-2);
  box-shadow: 0 12px 26px -22px rgba(15, 20, 32, .26);
}

#home-search .searchbar-icon {
  width: 42px;
  height: 42px;
  background: var(--surface-2);
  color: var(--text);
}
#home-search .searchbar-icon svg { width: 20px; height: 20px; }

#home-search .searchbar .btn-brand {
  padding: 13px 22px;
  background: var(--ink);
  color: #fff;
  font-size: 14.5px;
}
#home-search .searchbar .btn-brand:hover { background: var(--ink-2); }

#home-search .search-hint,
#home-search .search-input { padding-left: 10px; }

/* The block introduces the sections under it now, not the headline above it. */
#home-search.section--tight { padding: 26px 0 0; }
#home-search .search-pop { padding: 0 4px 10px; }