/*
  Homepage spacing only. Colors, type, and copy stay in the earlier
  stylesheets. This file is linked last, so when two rules name the
  same element with the same specificity, this one wins. That is the
  cascade: later + equally specific beats earlier.

  Custom properties (the --names) are variables. Writing them once on
  .breadly-home lets every rule below say var(--space-section) instead
  of inventing a new pixel value. Change the variable and the whole
  page moves together.

  The ladder, from tight to open:
    8px  things that are one unit (eyebrow and title, chip and chip)
    12px a line of body under a heading
    16px a small group (search and the Try row, icon and label)
    24px inside a card, or between sibling cards
    40px a heading block, then the content it introduces
    80px a new section (64px on a tablet, 56px on a phone)

  Tight inside a group, more air between sections. That contrast is
  what makes a long page feel organized instead of evenly cramped.
*/
.breadly-home {
  --space-tight: 8px;
  --space-text: 12px;
  --space-group: 16px;
  --space-card: 24px;
  --space-block: 40px;
  --space-section: 80px;
  /* Same left/right inset on every band. 24px on a phone, 32px once
     the window is wide enough that 24px would look like a sliver. */
  --page-gutter: 24px;
}

@media (min-width: 768px) {
  .breadly-home { --page-gutter: 32px; }
}

@media (max-width: 980px) {
  .breadly-home { --space-section: 64px; }
}

@media (max-width: 640px) {
  .breadly-home { --space-section: 56px; --space-block: 32px; }
}

/* One content column. max-width stops the line from stretching across
   a wide monitor; margin-inline: auto centers that column. padding-inline
   is the left and right padding together, so both sides always match. */
.breadly-home .wrap {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* The bar is short on purpose, but 52px left the links touching the
   edges. 64px (56px on a phone) is one step of air above and below. */
.breadly-home .nav .wrap {
  height: 64px;
  gap: var(--space-card);
}

.breadly-home .nav-r { gap: var(--space-text); }

@media (max-width: 980px) {
  .breadly-home .nav .wrap { height: 56px; gap: var(--space-group); }
  /* The open menu is position:absolute; top must equal the bar height
     or it overlaps the bar or leaves a gap. */
  .breadly-home .nav.menu-open .nav-links {
    top: 56px;
    padding: var(--space-group) var(--page-gutter);
    gap: var(--space-tight);
  }
}

/* Hero. Bottom padding stays 0: the next section's padding-top is the
   gap, and an earlier rule gives the hero a higher z-index so the
   search shadow is not cut off by that next section. */
.breadly-home .hero.hs-hero {
  padding: 32px 0 0;
  z-index: 1;
}

.breadly-home .hero.hs-hero .hero-copy {
  /* 100% of the column, not a second max-width. The headline, search,
     and category grid then share the same left and right edges. */
  max-width: 100%;
}

.breadly-home .hs-toast { margin: 0 auto var(--space-group); }

.breadly-home .hero.hs-hero .hero-copy h1 { margin: 0 auto; }

.breadly-home .hero .hs { margin-top: var(--space-group); }

/* The label and the field are one group, so the gap is a block step
   (24px), not a section. 28px was off the ladder. */
.breadly-home .hs-label { margin-bottom: var(--space-card); }

.breadly-home .hero form.hsearch {
  padding: 0 var(--space-tight) 0 20px;
  gap: var(--space-text);
}

.breadly-home .hero.hs-hero .hs-try {
  margin-top: var(--space-group);
  gap: var(--space-tight);
}

.breadly-home .hero.hs-hero .hs-chips { gap: var(--space-tight); }

/* Categories are a new group inside the hero, so they get more air
   above than the chip row does. The divider and the tiles use the
   full column; a 1000px cap left them short of the page edges. */
.breadly-home .hero.hs-hero .hs-cats-h {
  max-width: none;
  width: 100%;
  margin: var(--space-block) 0 var(--space-group);
  gap: var(--space-text);
}

.breadly-home .hero.hs-hero .cats {
  max-width: none;
  width: 100%;
  margin: 0;
  gap: 0 var(--space-card);
}

.breadly-home .hero.hs-hero .cat {
  padding: 20px 0;
  gap: var(--space-text);
}

.breadly-home .hero.hs-hero .tool-recommendations {
  margin: var(--space-card) auto 0;
}

.breadly-home .recommendation-header { margin-bottom: var(--space-group); }

.breadly-home .recommendation-grid { gap: var(--space-group); }

.breadly-home .recommendation-card {
  padding: 20px;
  gap: var(--space-group);
}

/* Every major band uses the same top padding, including the ones that
   are not .sec (the Chrome strip, brands, and the closing call to
   action). Mixing 8px, 40px, and 80px is what made the rhythm random. */
.breadly-home :is(.sec, .stacks-sec, .chrome-band, .rate-row) {
  padding-top: var(--space-section);
  padding-bottom: 0;
}

.breadly-home :is(.brands, .cta-final, footer) {
  margin-top: var(--space-section);
}

.breadly-home .sec-head {
  margin-bottom: var(--space-block);
  gap: var(--space-group);
}

.breadly-home :is(.h2, .sec-head .h2, .bband h2, .cf h2) {
  margin-top: var(--space-tight);
}

.breadly-home .lede { margin-top: var(--space-text); }

.breadly-home :is(.faq, .ext, .cw, .bband, .cf, .fgrid, .stacks) {
  column-gap: var(--space-card);
}

.breadly-home .carousel { --car-gap: 24px; }

.breadly-home .list .body {
  padding: var(--space-group) 0 var(--space-tight);
  gap: var(--space-tight);
}

.breadly-home #rewards .rj-steps { gap: var(--space-card); }

/* The little arrow between reward steps is placed with a negative
   right offset. Half of a 24px gap, plus the arrow's own width, keeps
   it centered in the space between cards. */
.breadly-home #rewards .rj-step:not(:last-child)::after { right: -20px; }

.breadly-home #rewards .rj-body { padding: 20px var(--space-card) var(--space-card); }

.breadly-home #rewards .rj-body p { margin-top: var(--space-tight); }

.breadly-home #rewards .rj-split {
  gap: var(--space-card);
  margin-top: var(--space-card);
}

.breadly-home #rewards .rj-kind { padding: 20px; }

.breadly-home #rewards .rj-kind ul {
  margin-top: var(--space-text);
  gap: var(--space-tight);
}

.breadly-home #rewards .rj-foot { margin-top: var(--space-card); gap: var(--space-text); }

.breadly-home #rewards .cashout {
  margin-top: var(--space-card);
  gap: var(--space-group);
  padding: var(--space-group) 20px;
}

.breadly-home .chrome-band .cb {
  gap: 32px;
  padding: 28px 32px;
}

.breadly-home .cb-copy h2 { margin-top: var(--space-tight); }

.breadly-home .cb-copy p { margin-top: var(--space-tight); }

.breadly-home .sx { padding: 20px 0; }

.breadly-home .sgrid { gap: var(--space-group); }

.breadly-home .sc {
  padding: 20px;
  gap: var(--space-text);
}

.breadly-home .cw-list {
  margin-top: var(--space-card);
  gap: var(--space-group);
}

.breadly-home .extension-captures { gap: var(--space-card); }

.breadly-home .reviews { gap: var(--space-card); }

.breadly-home .rv { padding: var(--space-card) 0; }

.breadly-home .rv-note { margin-top: var(--space-card); }

.breadly-home .ext { padding: 32px; }

.breadly-home .ext-feats {
  margin-top: var(--space-card);
  gap: var(--space-text);
}

.breadly-home .ef { padding: var(--space-group); }

.breadly-home :is(.bband, .cf) { padding: 40px 48px; }

.breadly-home :is(.bband p, .cf p) { margin-top: var(--space-text); }

.breadly-home :is(.bband .btns, .cf .btns) {
  margin-top: var(--space-card);
  gap: var(--space-text);
}

.breadly-home .bpts { gap: var(--space-text); }

.breadly-home .bpt { padding: var(--space-group) 18px; }

.breadly-home .faq-card { margin-top: var(--space-card); }

.breadly-home .qa { margin-bottom: var(--space-text); }

.breadly-home .qa summary {
  padding: 18px 20px;
  gap: var(--space-text);
}

.breadly-home .qa .ans { padding: 0 20px 20px; }

.breadly-home footer { padding: 48px 0 32px; }

.breadly-home .fgrid p { margin-top: var(--space-text); }

.breadly-home .fgrid h5 { margin-bottom: var(--space-text); }

.breadly-home .fgrid a { padding: 6px 0; }

.breadly-home .fbot {
  margin-top: 32px;
  padding-top: var(--space-card);
  gap: var(--space-group);
}

@media (max-width: 980px) {
  .breadly-home .chrome-band .cb { padding: var(--space-card); gap: var(--space-group); }
  .breadly-home :is(.bband, .cf, .ext) { padding: 28px var(--space-card); }
  .breadly-home #rewards .rj-step:not(:last-child)::after { right: auto; }
}

@media (max-width: 640px) {
  .breadly-home .hero.hs-hero { padding-top: var(--space-card); }
  .breadly-home .hs-toast { margin-bottom: var(--space-text); }
  .breadly-home .hero .hs { margin-top: var(--space-text); }
  .breadly-home .hs-label { margin-bottom: 20px; }
  .breadly-home .hero form.hsearch { padding: 0 6px 0 14px; }
  .breadly-home .hero.hs-hero .hs-try {
    margin-top: var(--space-text);
    /* The chip row scrolls sideways. A negative margin pulls it out to
       the screen edge; the matching padding puts "Try" back on the
       same inset as the search box. calc() does the arithmetic:
       0 minus the gutter. The old -18px was 2px off a 20px gutter. */
    margin-inline: calc(var(--page-gutter) * -1);
    padding-left: var(--page-gutter);
  }
  .breadly-home .hero.hs-hero .hs-chips { padding-right: var(--page-gutter); }
  .breadly-home .hero.hs-hero .hs-cats-h { margin-top: 32px; }
  .breadly-home .hero.hs-hero .cat { padding: var(--space-group) 0; }
  .breadly-home .sec-head { margin-bottom: var(--space-card); }
  .breadly-home .chrome-band .cb { padding: var(--space-card) 20px; }
  .breadly-home :is(.bband, .cf, .ext) { padding: var(--space-card) 20px; }
}