/* v9.1 peach theme (Abby's palette: #F97C50 coral, #FD9B42 apricot, #F89D6F soft peach, #FCB563 light apricot).
   Loaded last on every page. Filled CTAs use a coral->apricot gradient with deep-brown text:
   white fails contrast on every palette stop (2.62:1 on #F97C50, 2.11:1 on #FD9B42),
   #3B1A0C passes (5.99:1 and 7.43:1; hover stops #F89D6F 7.50:1, #FCB563 8.91:1). */
:root{
  --peach-grad:linear-gradient(135deg,#F97C50 0%,#FD9B42 100%);
  --peach-grad-h:linear-gradient(135deg,#F98A5E 0%,#FCB563 100%);
  --on-peach:#3B1A0C;
  --peach-glow:0 10px 30px rgba(249,124,80,.35);
  --peach-glow-h:0 14px 36px rgba(249,124,80,.45);
  --peach-tint:#FFF1E8;--peach-tint2:#FEE6D4;--peach-line:#F89D6F;
  --cash-bg:#FFF1E8;--cash-line:#F8B08A;
  --link-coral:#B84720;
}
/* filled primary buttons, site-wide */
body :is(.btn-peach,.btn-orange,.nav .nav-chrome,.chrome-band .cb-btn,.wel-btn,.wl-banner-cta,.bx-sub .wrap a.btn),
body.breadly-home :is(.btn-peach,.btn-orange,.btn-ink),
.breadly-home .hero form.hsearch .btn{
  background:var(--peach-grad)!important;color:var(--on-peach)!important;box-shadow:var(--peach-glow)!important;border:0;font-weight:700;
  transition:background .2s ease,box-shadow .2s ease,transform .15s ease,filter .2s ease}
body :is(.btn-peach,.btn-orange,.nav .nav-chrome,.chrome-band .cb-btn,.wel-btn,.wl-banner-cta,.bx-sub .wrap a.btn):hover,
body.breadly-home :is(.btn-peach,.btn-orange,.btn-ink):hover,
.breadly-home .hero form.hsearch .btn:hover{background:var(--peach-grad-h)!important;box-shadow:var(--peach-glow-h)!important;color:var(--on-peach)!important}
body :is(.btn-peach,.btn-orange,.nav .nav-chrome,.chrome-band .cb-btn,.wel-btn,.wl-banner-cta):active{transform:translateY(1px)}
body :is(.btn-peach,.btn-orange,.nav-chrome,.cb-btn,.wel-btn) .ico{color:var(--on-peach)}
body :is(.btn-peach,.btn-orange,.nav-chrome,.cb-btn,.wel-btn,.wl-banner-cta):focus-visible{outline:2px solid #3B1A0C;outline-offset:3px}
/* pill shape on the Chrome buttons and search button */
.nav .nav-chrome,.chrome-band .cb-btn,.wel-btn,.wl-banner-cta,.breadly-home .hero .hero-cta .btn,.cta-final .btn-peach{border-radius:999px!important}
.breadly-home .hero form.hsearch .btn{border-radius:999px}
/* saved-state list button (detail pages) keeps its outlined look */
body .btn-peach[data-save].is-saved{background:#fff!important;box-shadow:none!important}
/* solid accents -> gradient + deep-brown glyphs */
.ochip.cash.solid,.rj-checks .tick,.rj-toast i,.rj-kind.cash .ic,.upsell .ic,.db-banner .ic,.su-prog li.on i,.tl li.done i,.plan .tagtop,.pill-st.avail,.wel-ticks .ico{
  background:var(--peach-grad)!important;color:var(--on-peach)!important;border-color:transparent!important}
.ochip.cash.solid{box-shadow:0 4px 12px rgba(249,124,80,.30)}
.rw-chip.cashf[aria-pressed="true"]{background:var(--peach-grad);border-color:transparent;color:var(--on-peach)}
.rw-chip.cashf[aria-pressed="true"] .ico{color:var(--on-peach)}
.bx-bars i.hi,.fn:last-child i,.cap .bar b{background:var(--peach-grad)}
.upsell.ent .ic{background:#2A221E!important;color:#FFB08A!important}
/* $1 badges */
.rj-badge,.rw-feature .big-badge{background:radial-gradient(circle at 30% 26%,#FCB563 0%,#FD9B42 45%,#F97C50 100%)!important;color:var(--on-peach)!important;box-shadow:0 0 0 5px #fff,0 14px 34px rgba(249,124,80,.40)!important}
.badge-card .bd{background:var(--peach-grad)}
/* tints, borders, step labels, chips */
.rj-n{border-color:var(--peach-line);background:var(--peach-tint);color:#9A3E1A}
.rj-step.is-on{border-color:var(--peach-line);box-shadow:0 0 0 3px var(--peach-tint),var(--sh1)}
.hs-chip{background:var(--peach-tint);border-color:#F9C9AE;color:#5A2E1A}
.hs-chip:hover{background:var(--peach-tint2);border-color:var(--peach-line);color:#3B1A0C}
.hs-caret{background:#F97C50}
.breadly-home .hero form.hsearch{border-color:#F9C9AE;box-shadow:0 18px 44px rgba(249,124,80,.14),0 2px 6px rgba(40,28,20,.05)}
.breadly-home .hero form.hsearch:focus-within{border-color:#F97C50;box-shadow:0 0 0 4px rgba(249,124,80,.18),0 18px 44px rgba(249,124,80,.16)}
.breadly-home .hero form.hsearch > .ico,.hs-try-l .ico{color:#F97C50}
.breadly-home .hero.hs-hero h1 .g{color:#C4552B}
.chrome-band .cb{background:linear-gradient(135deg,#FFF3EA 0%,#FEE6D4 100%);border-color:#F9CBB1}
.wl-banner{background:var(--peach-tint);border-bottom-color:#F9C9AE}
.v9-banner{background:var(--peach-tint)}
/* savings stay green (never peach) */
.ochip.save{background:var(--save-bg)!important;color:var(--save)!important}

/* stack "Earn for trying" stat tiles: peach gradient, deep-brown text */
.sum.hot,.dh-panel .sum.hot{background:linear-gradient(135deg,#F97C50 0%,#FD9B42 100%)!important;color:#3B1A0C!important;border-color:transparent!important;box-shadow:0 8px 22px rgba(249,124,80,.28)}
.sum.hot .k,.dh-panel .sum.hot .k{color:rgba(59,26,12,.78)!important}
.sum.hot .v,.dh-panel .sum.hot .v{color:#3B1A0C!important}

/* remaining solid-rust accents -> peach gradient with deep-brown glyphs */
.sx-badge,.dh-stack .dh-copy .sx-badge,.st-num span,.fi.hot,.breadly-home .fi.hot,.earn,.qa[open] summary .pm,.vis.vtry .vbtn,.hero .kicker b{
  background:var(--peach-grad)!important;color:#3B1A0C!important}
.sx-badge .ico,.earn .ico,.fi.hot .ico,.vis.vtry .vbtn .ico{color:#3B1A0C!important;stroke:currentColor}
.howrank .hbadge,.breadly-home .howrank .hbadge,.vtoast i,.dockx{background:var(--peach-grad)!important;color:#3B1A0C!important}

/* Homepage rhythm.
   One spacing ladder, like a ruler with only a few marks:
   8px  = things that belong together (label and field, chip and chip)
   16px = a small group (a card's insides, the search and the Try row)
   40px = a new section
   Headlines use a short line-height so the letters don't float apart.
   Body stays 15px so paragraphs don't feel like titles. */
.breadly-home{
  --tight:8px;
  --group:16px;
  --section:40px;
}
.breadly-home .nav .wrap{
  height:52px;
  gap:var(--group);
}
.breadly-home .brandmark{font-size:18px;gap:var(--tight)}
.breadly-home .brandmark img{width:28px;height:28px}
.breadly-home .nav-links{gap:2px}
/* The phone menu copies Log in into the link list. Keep that copy hidden
   on desktop, or "Log in" shows twice. */
.breadly-home .nav-links a:not([data-mobile-login]),
.breadly-home .nav-r .login,
.breadly-home .nav-r .logoff,
.breadly-home .nav .nav-chrome{
  height:36px;
  display:inline-flex;
  align-items:center;
  box-sizing:border-box;
}
.breadly-home .nav-links [data-mobile-login],
.breadly-home .nav-links [data-mobile-logoff]{display:none}
.breadly-home .nav-links a:not([data-mobile-login]){padding:0 10px}
.breadly-home .nav-r{gap:var(--tight)}
.breadly-home .nav-r .login,
.breadly-home .nav-r .logoff{padding:0 12px}
.breadly-home .burger{width:36px;height:36px;border-radius:10px}
/* Hero only. The rest of the page still uses 8px / 16px / 40px.
   These numbers are a little larger so Crumb, the title, the search,
   and the chips each have a small even gap — like an Apple product page,
   where related lines sit close and the search gets one extra step of air.
   clamp() picks a size that grows with the window: never smaller than the
   first number, never bigger than the last. vw is a percent of window width. */
.breadly-home .hero.hs-hero{
  /* Short breath under the nav. Bottom stays 0 so the next section sits flush. */
  padding:20px 0 0;
}
.breadly-home .hero.hs-hero .hero-copy{
  /* Wide enough that the bigger title stays two lines on a desktop window. */
  max-width:1080px;
}
.breadly-home .hs-toast{
  width:120px;
  height:auto;
  /* 16px between Crumb and the headline. An older rule used -4px, which pulled them together. */
  margin:0 auto 16px;
}
.breadly-home .hero.hs-hero .hero-copy h1{
  font-size:clamp(40px,5vw,68px);
  line-height:1.05;
  letter-spacing:-.04em;
  /* 0 here on purpose: the toast's bottom margin already makes the 16px gap.
     Two headline lines stay tight (line-height) because they are one title. */
  margin:0 auto;
}
.breadly-home .hero .hs{
  /* 16px between the headline and the sentence under it. */
  margin-top:16px;
  scroll-margin-top:64px;
}
.breadly-home .hs-label{
  font-size:18px;
  line-height:1.4;
  /* 28px before the search — one clear step, not an empty band. */
  margin-bottom:28px;
}
.breadly-home .hero form.hsearch{
  height:68px;
  padding:0 8px 0 20px;
  gap:12px;
  border-width:1px;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(249,124,80,.12);
}
.breadly-home .hero form.hsearch > .ico{width:22px;height:22px}
.breadly-home .hero form.hsearch:focus-within{
  box-shadow:0 0 0 3px rgba(249,124,80,.22);
}
.breadly-home .hero form.hsearch input,
.breadly-home .hs-ph{font-size:18px}
.breadly-home .hero form.hsearch .btn{
  height:52px;
  padding:0 22px;
  font-size:16px;
}
.breadly-home .hero.hs-hero .hs-try{
  /* 16px between the search box and the Try chips. */
  margin-top:16px;
  gap:10px;
  background:transparent;
  box-shadow:none;
  border-radius:0;
}
.breadly-home .hero.hs-hero .hs-try-l{font-size:14.5px}
.breadly-home .hero.hs-hero .hs-try-l .ico{width:15px;height:15px}
.breadly-home .hero.hs-hero .hs-chip{
  height:38px;
  padding:0 14px;
  font-size:14.5px;
}
.breadly-home .hero.hs-hero :is(.hs-toast,h1,.hs-label){
  border-radius:8px;
  box-shadow:0 0 12px 8px #fff;
}
.breadly-home .hero.hs-hero .tool-recommendations{margin:12px auto 0;scroll-margin-top:64px}
.breadly-home .recommendation-header{margin-bottom:12px}
.breadly-home .recommendation-header h3{font-size:20px;line-height:1.15}
.breadly-home .recommendation-card{padding:var(--group);gap:12px;border-radius:14px}
.breadly-home .hs-cats-h{margin:var(--group) auto var(--tight);gap:12px}
.breadly-home .cats{gap:0 var(--group)}
.breadly-home .cat{padding:12px 8px;gap:12px}
.breadly-home .sec{padding-top:var(--section);padding-bottom:0}
.breadly-home .sec-head{margin-bottom:var(--group)}
.breadly-home :is(.h2,.sec-head .h2){
  font-size:clamp(26px,2.4vw,32px);
  line-height:1.08;
  margin-top:var(--tight);
}
.breadly-home .lede{margin:var(--tight) auto 0;font-size:15px;line-height:1.45}
.breadly-home .carousel{--car-gap:16px}
.breadly-home .list .body{padding:12px 0 14px;gap:6px}
.breadly-home .list h3{font-size:17px;line-height:1.25}
.breadly-home #rewards .rj-steps{gap:var(--group)}
.breadly-home #rewards .rj-step{border-radius:16px;box-shadow:none}
.breadly-home #rewards .rj-step.is-on{box-shadow:0 0 0 3px #FFF1EA}
.breadly-home #rewards .rj-body{padding:12px 16px 16px}
.breadly-home #rewards .rj-body h3{font-size:17px}
.breadly-home #rewards .rj-body p{font-size:14px;line-height:1.45;margin-top:6px}
.breadly-home #rewards .rj-split{gap:var(--group);margin-top:var(--group)}
.breadly-home #rewards .rj-kind{padding:16px;border-radius:16px}
.breadly-home #rewards .rj-kind ul{margin-top:12px;gap:var(--tight)}
.breadly-home #rewards .rj-foot{margin-top:var(--group);gap:12px}
.breadly-home #rewards .cashout{margin-top:var(--group)}
.breadly-home .chrome-band{padding:var(--tight) 0 0}
.breadly-home .chrome-band .cb{
  gap:20px;
  padding:16px 20px;
  border-radius:16px;
  box-shadow:none;
}
.breadly-home .cb-toast{width:96px;margin:0}
.breadly-home .cb-copy h2{
  font-size:clamp(24px,2.2vw,30px);
  line-height:1.08;
  margin-top:4px;
}
.breadly-home .cb-copy p{font-size:15px;line-height:1.45;margin-top:6px}
.breadly-home .chrome-band .cb-btn{
  height:48px;
  min-width:0;
  padding:0 20px;
  font-size:16px;
  gap:10px;
}
.breadly-home .chrome-band .cb-btn img{width:22px;height:22px}
.breadly-home .sx{padding:16px 0}
.breadly-home .sgrid{gap:12px}
.breadly-home .sc{padding:var(--group);gap:var(--tight);border-radius:14px}
.breadly-home .cw-list{margin-top:var(--group);gap:12px}
.breadly-home .reviews{gap:var(--group)}
.breadly-home .rv{padding:var(--group) 0}
.breadly-home .rv blockquote{font-size:15px;line-height:1.5}
.breadly-home .rv-sec-cta{margin-top:12px;gap:12px}
.breadly-home .ext{padding:24px}
.breadly-home .ext-feats{margin-top:var(--group);gap:var(--tight)}
.breadly-home .ef{padding:12px;border-radius:12px;box-shadow:none}
.breadly-home .bw{border-radius:16px;box-shadow:0 16px 36px rgba(40,28,20,.12)}
.breadly-home .brands,
.breadly-home .cta-final{margin-top:var(--section)}
.breadly-home :is(.bband,.cf){padding:24px;border-radius:16px}
.breadly-home :is(.bband h2,.cf h2){
  font-size:clamp(26px,2.4vw,32px);
  line-height:1.08;
  margin-top:var(--tight);
}
.breadly-home :is(.bband p,.cf p){font-size:15px;line-height:1.45;margin-top:var(--tight)}
.breadly-home :is(.bband .btns,.cf .btns){margin-top:var(--group);gap:var(--tight)}
.breadly-home .bpts{gap:var(--tight)}
.breadly-home .bpt{padding:12px 14px;border-radius:12px}
.breadly-home .qa{margin-bottom:var(--tight);border-radius:12px}
.breadly-home .qa summary{padding:14px 16px;font-size:16px;gap:12px}
.breadly-home .qa .ans{padding:0 16px 16px;font-size:15px;line-height:1.45}
.breadly-home .faq-card{margin-top:var(--group)}
.breadly-home footer{margin-top:var(--section);padding:32px 0 24px}
.breadly-home .fgrid p{font-size:14px;line-height:1.45;margin-top:var(--tight)}
.breadly-home .fgrid h5{margin-bottom:var(--tight)}
.breadly-home .fbot{margin-top:24px;padding-top:var(--group)}
.breadly-home :is(.faq,.ext,.cw,.bband,.cf,.fgrid,.stacks){column-gap:var(--group)}
@media (max-width:980px){
  .breadly-home .nav .wrap{height:48px}
  .breadly-home .nav.menu-open .nav-links{top:48px;padding:16px}
  .breadly-home .nav.menu-open .nav-links [data-mobile-login],
  .breadly-home .nav.menu-open .nav-links [data-mobile-logoff]{
    display:inline-flex;
    height:36px;
    align-items:center;
  }
}
@media (max-width:640px){
  /* Phone: same hero rhythm, slightly tighter so the bigger type still fits. */
  .breadly-home .hero.hs-hero{padding-top:12px}
  .breadly-home .hs-toast{width:96px;margin-bottom:12px}
  .breadly-home .hero.hs-hero .hero-copy h1{font-size:clamp(32px,8.6vw,40px)}
  .breadly-home .hero .hs{margin-top:12px}
  .breadly-home .hs-label{font-size:16px;margin-bottom:20px}
  .breadly-home .hero form.hsearch{height:60px;padding:0 6px 0 14px;border-radius:14px}
  .breadly-home .hero form.hsearch input,
  .breadly-home .hs-ph{font-size:16px}
  .breadly-home .hero form.hsearch .btn{width:46px;height:46px;padding:0}
  .breadly-home .hero.hs-hero .hs-try{margin-top:12px}
  .breadly-home .sec{padding-top:32px}
  .breadly-home .chrome-band .cb{padding:16px;border-radius:14px}
  .breadly-home :is(.bband,.cf,.ext){padding:20px 16px}
}

/* Tool page pair: Try it is the solid orange primary. Write a review is the white pill.
   Specificity beats body :is(.btn-peach) so the gradient and glow do not come back. */
body .tp-cta a.btn.tp-earn{
  width:100%;
  height:58px;
  min-height:58px;
  justify-content:center;
  background:#F97C50 !important;
  background-image:none !important;
  color:#3B1A0C !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:999px !important;
  font-size:18px;
  font-weight:700;
}
body .tp-cta a.btn.tp-earn:hover{
  background:#F26A3C !important;
  background-image:none !important;
  color:#3B1A0C !important;
  box-shadow:none !important;
}
body .tp-cta .tp-earn > .ico{display:none !important}
body .tp-cta a.btn.tp-write{
  width:100%;
  height:46px;
  min-height:46px;
  justify-content:center;
  background:#fff !important;
  background-image:none !important;
  color:#1E1916 !important;
  border:2px solid #1E1916 !important;
  box-shadow:none !important;
  border-radius:999px !important;
  font-size:15px;
  font-weight:600;
}
body .tp-cta a.btn.tp-write .ico{width:15px;height:15px}
body .tp-tabs a.tp-tabs-cta{
  background:#fff !important;
  background-image:none !important;
  color:#1E1916 !important;
  border:1.5px solid #1E1916 !important;
  box-shadow:none !important;
  font-size:13.5px;
  font-weight:600;
}
body .tp-tabs a.tp-tabs-cta:hover{
  background:#FFF1E8 !important;
  box-shadow:none !important;
  color:#3B1A0C !important;
}
body .tp-cta a.btn.tp-write:hover{
  background:#FFF1E8 !important;
  background-image:none !important;
  border-color:#B84720 !important;
  color:#3B1A0C !important;
  box-shadow:none !important;
}
/* Rewards "Read reviews" / "Leave a review": brown text, icon beside the label. */
.breadly-home .oact{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  margin-top:8px;
}
.breadly-home .oact a.oread,
.breadly-home .oact a.oreview{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#B84720;
  font-weight:650;
  text-decoration:none;
}
.breadly-home .oact a.oread:hover,
.breadly-home .oact a.oreview:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}
.breadly-home .oact a .ico{
  display:inline-block;
  width:16px;
  height:16px;
  flex:none;
}
a.tool-logo-link{cursor:pointer;display:inline-flex;color:inherit}
a.tool-logo-link img{cursor:pointer}
/* Lower tool card: Try is outlined. Write a review is the white secondary pill. */
body .yr-in a.btn.yr-try,
body .yr-in a.btn.yr-write{
  height:42px;
  min-height:42px;
  padding:0 14px;
  border-radius:999px !important;
  background:#fff !important;
  background-image:none !important;
  box-shadow:none !important;
  font-weight:650;
}
body .yr-in a.btn.yr-try{
  color:#C4552B !important;
  border:1.5px solid #F97C50 !important;
  font-size:14px;
}
body .yr-in a.btn.yr-try .ico{width:14px;height:14px;color:currentColor}
body .yr-in a.btn.yr-try:hover{
  background:#FFF1E8 !important;
  background-image:none !important;
  box-shadow:none !important;
  color:#B84720 !important;
}
body .yr-in a.btn.yr-write{
  color:#1E1916 !important;
  border:2px solid #1E1916 !important;
  font-size:14px;
}
body .yr-in a.btn.yr-write:hover{
  background:#FFF1E8 !important;
  background-image:none !important;
  box-shadow:none !important;
  color:#3B1A0C !important;
  border-color:#B84720 !important;
}

/* One-line site header; wider navigation accommodates the business dashboard. */
.breadly-home .nav .wrap { max-width: 1440px; gap: 16px; flex-wrap: nowrap; }
.breadly-home .nav-links a:not([data-mobile-login]) { padding-inline: 8px; font-size: 14px; }
.breadly-home .nav-r { gap: 8px; }
.breadly-home .nav-r .login, .breadly-home .nav-r .logoff { padding-inline: 8px; font-size: 14px; }
@media (max-width: 1200px) {
  .breadly-home .nav .nav-links { display: none; }
  .breadly-home .nav .burger { display: grid; flex-shrink: 0; }
  .breadly-home .nav.menu-open .nav-links { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: #fff; padding: 16px; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--line); }
  .breadly-home .nav.menu-open .nav-links [data-mobile-login],
  .breadly-home .nav.menu-open .nav-links [data-mobile-logoff] { display: inline-flex; align-items: center; }
}