/* Folkle Find, v3 (Khushi's chosen design, Oct 26). Square 4px corners, filters on the left, no pictures. */
#tab-index { --f3-bg: #F5EDE0; --f3-card: #FFFDF8; --f3-line: #E5DBC7; --f3-ink: #1F4535; --f3-soft: #6A665E; --f3-tc: #D46B3D; --f3-sage: #DDE5D3; }
#tab-index > :not(.f3-wrap) { display: none !important; }
.f3-wrap { max-width: 1240px; margin: 0 auto; padding: 24px 24px 60px; color: var(--f3-ink); font: 15px/1.5 DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; text-align: left; }
.f3-wrap button { font: inherit; color: inherit; cursor: pointer; }
.f3-wrap h1 { font: 400 36px/1.1 Georgia, serif; margin: 0; color: var(--f3-ink); }
.f3-wrap h2 { font: 400 22px/1.2 Georgia, serif; margin: 0; color: var(--f3-ink); }
.f3-two { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.f3-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.f3-pi { width: 20px; height: 20px; fill: none; stroke: var(--f3-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* side filters */
.f3-side { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow: auto; background: var(--f3-card); border: 1px solid #E6DCC9; border-radius: 4px; padding: 4px 14px 12px; }
.f3-fsec { border-bottom: 1px solid #F0E8DA; }
.f3-fsec:last-of-type { border-bottom: 0; }
.f3-fh { font: 600 11.5px DM Sans, -apple-system, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #6E7468; margin: 14px 0 8px; }
.f3-cats { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; }
.f3-cats button { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 4px; font-size: 14px; border: 0; background: none; text-align: left; }
.f3-cats button.on { background: var(--f3-sage); font-weight: 600; }
.f3-n { margin-left: auto; color: var(--f3-soft); font-size: 12.5px; font-weight: 400; }
.f3-fbar { display: flex; width: 100%; align-items: center; gap: 8px; border: 0; background: none; padding: 13px 2px; text-align: left; }
.f3-ft { font: 600 11.5px DM Sans, -apple-system, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #6E7468; white-space: nowrap; }
.f3-fv { flex: 1; text-align: right; font-size: 13.5px; color: var(--f3-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f3-fv.set { color: var(--f3-tc); font-weight: 600; }
.f3-car { color: var(--f3-soft); font-size: 11px; width: 10px; }
.f3-fbody { padding: 0 0 12px; }
.f3-opt { display: flex; width: 100%; align-items: center; gap: 10px; border: 0; background: none; padding: 6px 4px; font-size: 14px; text-align: left; border-radius: 4px; }
.f3-opt:hover { background: #F5EEE2; }
.f3-fl { flex: 1; }
.f3-bx { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #C9BDA6; flex: none; display: grid; place-items: center; background: #fff; }
.f3-opt.on .f3-bx { border-color: var(--f3-ink); }
.f3-opt.on .f3-bx:after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--f3-ink); }
.f3-opt.on .f3-fl { font-weight: 600; }
.f3-kgh { font: 600 11px DM Sans, -apple-system, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--f3-tc); padding: 10px 4px 2px; }
.f3-ksub { margin: 0 0 4px 22px; border-left: 2px solid #EFE6D5; padding-left: 6px; }
.f3-ksub .f3-opt { font-size: 13.5px; padding: 4px; }
.f3-sub { font-size: 12.5px; color: var(--f3-soft); font-weight: 600; margin: 4px 0 4px; }
.f3-area { display: flex; width: 100%; align-items: center; gap: 8px; border: 0; background: none; padding: 7px 4px; border-radius: 4px; font-size: 14px; text-align: left; }
.f3-area.on { background: var(--f3-sage); font-weight: 600; }
.f3-hood { display: flex; width: 100%; align-items: center; border: 0; background: none; padding: 5px 4px 5px 24px; font-size: 13.5px; border-radius: 4px; text-align: left; }
.f3-hood.on { background: var(--f3-ink); color: #fff; }
.f3-from { font-size: 13.5px; color: var(--f3-soft); margin: 2px 0 10px; }
.f3-from b { color: var(--f3-ink); }
.f3-link { border: 0; background: none; color: var(--f3-tc); font-weight: 600; font-size: 13.5px; padding: 0; text-decoration: none; }
.f3-seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--f3-line); border-radius: 4px; overflow: hidden; background: #fff; }
.f3-seg button { border: 0; border-left: 1px solid var(--f3-line); background: none; padding: 8px 0; font-size: 13px; }
.f3-seg button:first-child { border-left: 0; }
.f3-seg button.on { background: var(--f3-ink); color: #fff; font-weight: 600; }
.f3-pick { border: 1px solid var(--f3-line); border-radius: 4px; background: #fff; padding: 8px; margin: 0 0 10px; }
.f3-pickq { width: 100%; box-sizing: border-box; border: 1px solid var(--f3-line); border-radius: 4px; padding: 8px 10px; font: 14px DM Sans, -apple-system, sans-serif; color: var(--f3-ink); outline: none; margin-bottom: 6px; }
.f3-picklist { max-height: 220px; overflow: auto; }
.f3-pgh { font: 600 11px DM Sans, -apple-system, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6E7468; padding: 8px 6px 4px; }
.f3-pn { display: flex; width: 100%; justify-content: space-between; border: 0; background: none; padding: 6px; border-radius: 4px; font-size: 14px; text-align: left; }
.f3-pn:hover { background: #F5EEE2; }
.f3-pn.on { background: var(--f3-sage); font-weight: 600; }
.f3-pnone { padding: 8px 6px; color: var(--f3-soft); font-size: 13.5px; }
.f3-done, .f3-ftoggle { display: none; }

/* search + results */
.f3-srch { display: flex; align-items: center; gap: 10px; background: var(--f3-card); border: 1px solid var(--f3-line); border-radius: 100px; padding: 6px 6px 6px 18px; }
.f3-srch .f3-pi { stroke: var(--f3-soft); flex: none; }
.f3-srch input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 15px DM Sans, -apple-system, sans-serif; color: var(--f3-ink); }
.f3-go { border: 0; background: var(--f3-tc); color: #fff !important; border-radius: 100px; padding: 9px 18px; font-weight: 600 !important; font-size: 14px !important; }
.f3-x { border: 0; background: none; color: var(--f3-soft) !important; font-size: 13px !important; }
.f3-hint { margin: 6px 0 0 18px; font-size: 12.5px; color: var(--f3-soft); }
.f3-head { margin-top: 20px; }
.f3-count { margin: 6px 0 0; font-size: 16px; font-weight: 500; }
.f3-applied { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 4px; }
.f3-applied span { display: inline-flex; gap: 6px; align-items: center; background: #F2D3C2; color: #7A3A1C; border-radius: 100px; padding: 4px 6px 4px 11px; font-size: 12.5px; }
.f3-applied span button { border: 0; background: #fff9; border-radius: 50%; width: 18px; height: 18px; color: #7A3A1C; font-size: 11px; padding: 0; }
.f3-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.f3-card { background: var(--f3-card); border: 1px solid #E6DCC9; border-radius: 4px; padding: 16px 18px; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.f3-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(31,69,53,.08); }
.f3-ctop { display: flex; justify-content: space-between; gap: 8px; }
.f3-nm { font: 400 18px/1.2 Georgia, serif; }
.f3-meta { color: var(--f3-soft); font-size: 12.5px; margin: 4px 0 8px; }
.f3-far { color: var(--f3-ink); font-weight: 600; }
.f3-recs { color: var(--f3-tc); font-weight: 600; font-size: 13px; }
.f3-says { font-size: 12.5px; color: #4F5A52; margin-top: 6px; font-style: italic; }
.f3-says span { font-style: normal; color: var(--f3-soft); }
.f3-acts { display: inline-flex; gap: 2px; flex: none; }
.f3-heart { border: 0; background: none; padding: 2px; display: grid; place-items: center; }
.f3-heart svg { width: 20px; height: 20px; fill: none; stroke: var(--f3-ink); stroke-width: 1.7; }
.f3-book.on svg { fill: var(--f3-ink); }
.f3-faces { display: inline-flex; }
.f3-faces i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 10px DM Sans, -apple-system, sans-serif; font-style: normal; margin-right: -5px; border: 2px solid var(--f3-card); }
.f3-more { display: block; padding: 14px 0; font-size: 14px; }
.f3-empty { background: var(--f3-card); border: 1px solid #E6DCC9; border-radius: 4px; padding: 26px; text-align: center; color: var(--f3-soft); margin-top: 14px; }
.f3-need { margin-top: 26px; padding: 0; }   /* the page's own section style adds 80px above and below (Khushi, Oct 26: big gaps) */
.f3-need:first-of-type { margin-top: 14px; }
.f3-needh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.f3-needh h2 span { font: 500 13px DM Sans, -apple-system, sans-serif; color: var(--f3-soft); margin-left: 6px; }
.f3-need .f3-grid { margin-top: 10px; }

/* place page */
.f3-back { border: 0; background: none; font-weight: 600; padding: 0; margin-bottom: 16px; }
.f3-phead { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.f3-kind { font: 600 12px DM Sans, -apple-system, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--f3-tc); }
.f3-kind span { color: var(--f3-ink); }
.f3-pname { font: 400 44px/1.1 Georgia, serif !important; margin: 6px 0 10px !important; }
.f3-prow { display: flex; align-items: center; gap: 10px; }
.f3-soft { color: var(--f3-soft); }
.f3-small { font-size: 13px; line-height: 1.5; }
.f3-pbtns { display: flex; gap: 10px; flex-wrap: wrap; }
.f3-pb { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #E6DCC9; background: #FBF6EC; border-radius: 100px; padding: 12px 22px; font-weight: 600; font-size: 15px; }
.f3-pb svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.f3-pb.f3-pr { background: var(--f3-tc); border-color: var(--f3-tc); color: #fff !important; }
.f3-pb.on { background: var(--f3-ink); color: #fff !important; border-color: var(--f3-ink); }
.f3-pb.on svg { fill: #fff; }
.f3-pinfo { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); background: var(--f3-card); border: 1px solid #EFE6D5; border-radius: 4px; padding: 22px 8px; }
.f3-pcol { padding: 0 22px; border-left: 1px solid #EFE6D5; font-size: 15px; line-height: 1.5; }
.f3-pcol:first-child { border-left: 0; }
.f3-pch { display: flex; align-items: center; gap: 10px; font: 600 12px DM Sans, -apple-system, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #5E655F; margin-bottom: 12px; }
.f3-pic { width: 38px; height: 38px; border-radius: 50%; background: #E8EEE2; display: grid; place-items: center; flex: none; }
.f3-pact { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; border: 1px solid #E6DCC9; border-radius: 100px; padding: 8px 18px; font-weight: 600; font-size: 14px; text-decoration: none; color: var(--f3-ink); background: #fff; }
.f3-pact .f3-pi { width: 16px; height: 16px; }
.f3-plink { display: block; margin-top: 8px; font-size: 13.5px; color: var(--f3-tc); font-weight: 600; text-decoration: none; }
.f3-feat { font: 600 11px DM Sans, -apple-system, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #6E7468; margin: 12px 0 4px; }
.f3-pcats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #EEF1E8; border-radius: 4px; padding: 14px 22px; margin-top: 16px; }
.f3-pcl { font: 600 12px DM Sans, -apple-system, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #5E655F; margin-right: 8px; }
.f3-chip { background: #E0E7D8; border-radius: 100px; padding: 7px 16px; font-size: 14px; }
.f3-chip.on { background: #3F6B50; color: #fff; }
.f3-ptwo { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; margin-top: 16px; }
.f3-ptwo.one { grid-template-columns: 1fr; }
.f3-box { background: var(--f3-card); border: 1px solid #EFE6D5; border-radius: 4px; padding: 22px 24px; }
.f3-box h2 { font-size: 28px !important; margin-bottom: 8px !important; }
.f3-box p { margin: 0; color: #4F5A52; line-height: 1.65; font-size: 15.5px; }
.f3-spec { display: flex; flex-wrap: wrap; gap: 8px; }
.f3-spec span { background: #EEF1E8; border-radius: 100px; padding: 7px 14px; font-size: 14px; }
.f3-facts { display: flex; gap: 30px; background: var(--f3-card); border: 1px solid #EFE6D5; border-radius: 4px; padding: 18px 24px; margin-top: 16px; }
.f3-facts > div { display: flex; gap: 14px; align-items: center; }
.f3-facts .f3-pi { width: 30px; height: 30px; }
.f3-facts b { display: block; font-size: 16px; }
.f3-facts span { color: var(--f3-soft); font-size: 14px; }
.f3-who { margin-top: 16px; }
.f3-who ul { list-style: none; padding: 0; margin: 8px 0 0; }
.f3-who li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid #F0E8DA; }
.f3-who li:first-child { border-top: 0; }
.f3-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; flex: none; }
.f3-q { font: italic 15px Georgia, serif; margin-top: 3px; }
.f3-lock { display: block !important; color: var(--f3-soft); }
#f3-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: #1F4535; color: #fff; border-radius: 100px; padding: 9px 18px; font: 14px DM Sans, -apple-system, sans-serif; z-index: 9000; opacity: 0; transition: opacity .2s; pointer-events: none; }
#f3-toast.show { opacity: 1; }

/* phone */
@media (max-width: 820px) {
  .f3-wrap { padding: 16px 16px 50px; }
  .f3-two { grid-template-columns: 1fr; }
  .f3-side { display: none; position: static; max-height: none; order: 2; }
  .f3-side.open { display: block; margin: 12px 0 14px; }
  .f3-two > div { order: 1; }
  .f3-ftoggle { display: inline-flex; margin-top: 12px; border: 1px solid var(--f3-line); background: var(--f3-card); border-radius: 100px; padding: 8px 16px; font-weight: 600; font-size: 14px; }
  .f3-side.open .f3-done { display: block; width: 100%; margin-top: 10px; border: 0; border-radius: 100px; background: var(--f3-ink); color: #fff; padding: 11px; font-weight: 600; }
  .f3-grid { grid-template-columns: 1fr; }
  .f3-wrap h1 { font-size: 28px; }
  .f3-pname { font-size: 32px !important; }
  .f3-pinfo { grid-template-columns: 1fr; padding: 10px 0; }
  .f3-pcol { border-left: 0; border-top: 1px solid #EFE6D5; padding: 16px 18px; }
  .f3-pcol:first-child { border-top: 0; }
  .f3-ptwo { grid-template-columns: 1fr; }
  .f3-pb { padding: 10px 16px; font-size: 14px; }
}

/* ---- layout v2 (Khushi's reference, Oct 26): Categories panel, Type checkboxes, folding rows, sort + grid/list ---- */
.f3-side { padding: 18px 16px 10px; }
.f3-sh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.f3-sh h3 { margin: 0; font: 400 22px Georgia, serif; color: var(--f3-ink); }
.f3-clearall { border: 0; background: none; font-size: 13px; color: var(--f3-soft); text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.f3-cats { padding-bottom: 14px; border-bottom: 1px solid #EFE6D5; }
.f3-cats button { padding: 10px 10px; font-size: 15.5px; gap: 12px; }
.f3-cats button .f3-ic { width: 20px; height: 20px; }
.f3-cats button.on { background: #EEE7DB; }
.f3-fold { border-bottom: 1px solid #EFE6D5; }
.f3-fold:last-of-type { border-bottom: 0; }
.f3-foldbar { display: flex; width: 100%; align-items: center; gap: 12px; border: 0; background: none; padding: 16px 4px; text-align: left; }
.f3-foldbar .f3-pi { width: 20px; height: 20px; }
.f3-foldt { font: 400 17px Georgia, serif; color: var(--f3-ink); }
.f3-fv { font-size: 13px; }
.f3-chev { margin-left: auto; color: var(--f3-ink); font-size: 16px; line-height: 1; }
.f3-fold .f3-fv { margin-left: auto; }
.f3-fold .f3-fv + .f3-chev { margin-left: 8px; }
.f3-cb { display: flex; width: 100%; align-items: center; gap: 12px; border: 0; background: none; padding: 7px 4px; font-size: 15px; text-align: left; color: var(--f3-ink); }
.f3-cb.small { font-size: 14px; padding: 5px 4px; }
.f3-box2 { width: 20px; height: 20px; border-radius: 3px; border: 1.5px solid #C9BDA6; background: #fff; flex: none; display: grid; place-items: center; }
.f3-cb.on .f3-box2 { background: var(--f3-ink); border-color: var(--f3-ink); }
.f3-cb.on .f3-box2:after { content: ''; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.f3-cb .f3-fl { flex: 1; }
.f3-srch { padding: 8px 8px 8px 20px; }
.f3-srch input { font-size: 16px; }
.f3-go { padding: 12px 24px !important; font-size: 15px !important; }
.f3-hint { margin: 8px 0 0 6px; font-size: 13px; }
.f3-headrow { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.f3-head { margin-top: 0; }
.f3-wrap h1 { font-size: 54px; line-height: 1.02; }
.f3-count { font: 400 18px Georgia, serif; margin: 4px 0 0; }
.f3-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.f3-sort { display: flex; align-items: center; gap: 10px; font: 400 14px Georgia, serif; color: var(--f3-ink); }
.f3-sort select { font: 14px Georgia, serif; color: var(--f3-ink); background: var(--f3-card); border: 1px solid var(--f3-line); border-radius: 100px; padding: 9px 14px; }
.f3-view { display: inline-flex; background: var(--f3-card); border: 1px solid var(--f3-line); border-radius: 100px; padding: 4px; }
.f3-view button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; border-radius: 100px; padding: 7px 16px; font: 14px Georgia, serif; }
.f3-view button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.f3-view button.on { background: #EEE7DB; }
.f3-view button.on svg rect { fill: currentColor; }
.f3-grid { gap: 16px; }
.f3-card { padding: 20px 22px 18px; }
.f3-nm { font-size: 20px; line-height: 1.2; }
.f3-heart svg { width: 22px; height: 22px; }
.f3-acts { gap: 8px; }
.f3-types { color: var(--f3-soft); font-size: 14px; margin: 8px 0 10px; }
.f3-line { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--f3-ink); margin-top: 7px; }
.f3-line .f3-pi { width: 17px; height: 17px; flex: none; }
.f3-list { display: flex; flex-direction: column; background: var(--f3-card); border: 1px solid #E6DCC9; border-radius: 4px; margin-top: 14px; }
.f3-lrow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) 110px auto; align-items: center; gap: 16px; padding: 16px 20px; border-top: 1px solid #F0E8DA; cursor: pointer; }
.f3-lrow:first-child { border-top: 0; }
.f3-lrow:hover { background: #FBF6EC; }
.f3-lmain { display: flex; flex-direction: column; }
.f3-lmain .f3-types { margin: 4px 0 0; }
.f3-lrow .f3-line { margin: 0; }
@media (max-width: 820px) {
  .f3-wrap h1 { font-size: 34px; }
  .f3-headrow { align-items: flex-start; }
  .f3-tools { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .f3-lrow { grid-template-columns: 1fr auto; }
  .f3-lrow .f3-line { grid-column: 1; }
}

/* phone: Grid = two small cards side by side, List = slim rows (Khushi, Oct 26: they looked the same) */
@media (max-width: 820px) {
  .f3-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .f3-grid .f3-card { padding: 12px 12px 12px; }
  .f3-grid .f3-ctop { flex-direction: column-reverse; gap: 6px; }
  .f3-grid .f3-acts { align-self: flex-end; gap: 4px; }
  .f3-grid .f3-heart svg { width: 19px; height: 19px; }
  .f3-grid .f3-nm { font-size: 16px; }
  .f3-grid .f3-types { font-size: 12.5px; margin: 6px 0 6px; }
  .f3-grid .f3-line { font-size: 12.5px; gap: 6px; margin-top: 5px; }
  .f3-grid .f3-line .f3-pi { width: 14px; height: 14px; }
  .f3-list { margin-top: 10px; }
  .f3-lrow { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
  .f3-lmain { flex: 1; min-width: 0; }
  .f3-lmain .f3-nm { font-size: 16px; }
  .f3-lmain .f3-types { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .f3-lrow > .f3-line { display: none; }
  .f3-lrow .f3-acts { gap: 2px; }
  .f3-lrow .f3-heart svg { width: 19px; height: 19px; }
}
.f3-ponly { display: none; }
@media (max-width: 820px) { .f3-ponly { display: inline; } }
.f3-two > div { min-width: 0; }

/* Sort by: Folkle dropdown instead of the Mac's grey list */
.f3-sort { gap: 10px; }
.f3-dd { position: relative; }
.f3-ddbtn { display: inline-flex; align-items: center; gap: 10px; min-width: 190px; justify-content: space-between; background: var(--f3-card); border: 1px solid var(--f3-line); border-radius: 100px; padding: 9px 16px; font: 14px Georgia, serif; color: var(--f3-ink); }
.f3-ddbtn:hover, .f3-ddbtn.open { border-color: var(--f3-ink); }
.f3-chev2 { font-size: 14px; line-height: 1; transform: translateY(-2px); }
.f3-ddlist { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 100%; background: var(--f3-card); border: 1px solid var(--f3-line); border-radius: 4px; box-shadow: 0 14px 34px rgba(31,69,53,.14); padding: 6px; }
.f3-ddlist button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 14px; border: 0; background: none; border-radius: 4px; padding: 9px 12px; font: 14.5px Georgia, serif; color: var(--f3-ink); text-align: left; white-space: nowrap; }
.f3-ddlist button:hover { background: #F5EEE2; }
.f3-ddlist button.on { background: var(--f3-sage); font-weight: 600; }
.f3-ddlist button span { color: var(--f3-ink); }
@media (max-width: 820px) { .f3-ddlist { left: 0; right: auto; } }

/* the old Find heading + "Look up" box: the new Find has its own title and search (Khushi, Oct 26: Find showed twice) */
.top-search { display: none !important; }

/* smaller Find (Khushi, Oct 26: "this also looks very big"; approved "find is ok") */
.f3-wrap h1 { font-size: 34px; line-height: 1.1; }
.f3-count { font-size: 15px; }
.f3-nm { font-size: 17px; }
.f3-sh h3 { font-size: 18px; }
.f3-cats button { padding: 8px 10px; font-size: 14px; }
.f3-cats button .f3-ic { width: 18px; height: 18px; }
.f3-foldt { font-size: 15px; }
.f3-foldbar { padding: 13px 4px; }
.f3-sort { font-size: 13.5px; }
@media (max-width: 820px) { .f3-wrap h1 { font-size: 26px; } }

/* Sort and Grid/List in the plain site font, smaller, no bold */
.f3-sort, .f3-ddbtn, .f3-ddlist button, .f3-view button { font-family: DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; }
.f3-sort { font-size: 13.5px; color: var(--f3-soft, #6A665E); }
.f3-ddbtn { font-size: 14px; min-width: 170px; padding: 8px 14px; }
.f3-ddlist { padding: 4px; }
.f3-ddlist button { font-size: 14px; padding: 9px 12px; }
.f3-ddlist button.on { font-weight: 500; }
.f3-ddlist button span { font-size: 13px; color: var(--f3-ink); }
.f3-view button { font-size: 13.5px; padding: 6px 14px; }

/* one Location section (Khushi, Oct 26, option A): a two-way switch, Near me / In an area */
.f3-mode { display: grid; grid-template-columns: 1fr 1fr; background: #F3EDE2; border-radius: 100px; padding: 3px; margin: 0 0 12px; }
.f3-mode button { border: 0; background: none; border-radius: 100px; padding: 7px 0; font: 13.5px DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--f3-soft, #6A665E); cursor: pointer; }
.f3-mode button.on { background: var(--f3-card, #FFFDF8); color: var(--f3-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(31,69,53,.12); }
.f3-mode button:focus-visible { outline: 2px solid var(--f3-ink); outline-offset: 2px; }

/* under the filters: recommend a provider (Khushi, Oct 26) */
.f3-recbox { margin: 6px 0 8px; padding: 16px 4px 6px; border-top: 1px solid #EFE6D5; }
.f3-recbox b { display: block; font: 400 16px/1.3 Georgia, 'Times New Roman', serif; color: var(--f3-ink); }
.f3-recbox span { display: block; margin: 4px 0 12px; font-size: 13px; line-height: 1.45; color: var(--f3-soft, #6A665E); }
.f3-recbtn { width: 100%; border: 0; border-radius: 100px; background: #D46B3D; color: #fff; padding: 10px 14px; font: 600 14px DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; cursor: pointer; }
.f3-recbtn:hover { background: #B85A2E; }

/* Khushi, Oct 26: "it should be a separate box". The filters and "Recommend a provider" are two cards in the left column */
.f3-side { background: none !important; border: 0 !important; padding: 0 !important; }
.f3-panel { background: var(--f3-card); border: 1px solid #E6DCC9; border-radius: 4px; padding: 18px 16px 10px; }
.f3-recbox { margin: 14px 0 0; padding: 18px 16px; border: 1px solid #E6DCC9; border-top: 1px solid #E6DCC9; border-radius: 4px; background: var(--f3-card); }

/* Khushi, Oct 26: back to Home's results; place names drop down while typing; "Why parents love it" next to who recommends */
.f3-home { display: inline-block; margin: 0 0 10px; text-decoration: none; }
.f3-srch { position: relative; }
.f3-sugg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: #FFFDF8; border: 1px solid #E6DCC9; border-radius: 4px; box-shadow: 0 12px 30px rgba(31,69,53,.12); overflow: hidden; }
.f3-sugg[hidden] { display: none; }
.f3-sugg button { all: unset; box-sizing: border-box; display: flex; flex-direction: column; width: 100%; padding: 10px 16px; cursor: pointer; border-top: 1px solid #F0E8DA; }
.f3-sugg button:first-child { border-top: 0; }
.f3-sugg button:hover, .f3-sugg button.on { background: #F5EDE0; }
.f3-sugg b { font: 400 16px/1.3 Georgia, 'Times New Roman', serif; color: #1F4535; }
.f3-sugg span { font-size: 13px; color: #77726B; }
.f3-whorow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.f3-whorow.one { grid-template-columns: 1fr; }
.f3-whorow > .f3-box { margin-top: 0; }
.f3-why ul { list-style: none; margin: 0; padding: 0; }
.f3-why li { padding: 10px 0; border-top: 1px solid #EFE6D5; font: 400 16px/1.4 Georgia, 'Times New Roman', serif; color: #1F4535; }
.f3-why li:first-child { border-top: 0; padding-top: 0; }
.f3-why li span { display: block; margin-top: 2px; font: 13px DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #6E6A62; }
@media (max-width: 820px) { .f3-whorow { grid-template-columns: 1fr; } }

/* several searches: one tab each (Khushi, Oct 26: option A) */
.f3-ntabs { display: flex; gap: 6px; margin: 18px 0 6px; border-bottom: 1px solid #E6DCC9; overflow-x: auto; scrollbar-width: none; }
.f3-ntabs::-webkit-scrollbar { display: none; }
.f3-ntabs button { all: unset; flex: none; cursor: pointer; padding: 10px 16px 11px; font: 400 19px Georgia, 'Times New Roman', serif; color: #6E6A62; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.f3-ntabs button span { font: 500 13px DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #9A948A; margin-left: 7px; }
.f3-ntabs button.on { color: #1F4535; border-bottom-color: #D46B3D; }
.f3-ntabs button:focus-visible { outline: 2px solid #1F4535; outline-offset: -2px; }
@media (max-width: 820px) { .f3-ntabs button { padding: 9px 12px 10px; font-size: 17px; } }

/* "Recommended by": smaller names (Khushi, Oct 26: "the names look too big") */
.f3-who li { font-size: 14px; line-height: 1.45; color: #6E6A62; padding: 9px 0; align-items: flex-start; }
.f3-who li b { font-size: 14px; font-weight: 600; color: #1F4535; }
.f3-who .f3-av { width: 28px; height: 28px; font-size: 12px; }
.f3-who .f3-q { font-size: 14.5px; line-height: 1.5; color: #3A3A36; }
/* more compact (Khushi, Oct 26) */
.f3-who h2 { margin-bottom: 4px; }
.f3-who ul { margin-top: 4px; }
.f3-who li { gap: 10px; padding: 7px 0; font-size: 13.5px; line-height: 1.4; }
.f3-who li b { font-size: 13.5px; }
.f3-who .f3-av { width: 24px; height: 24px; font-size: 11px; margin-top: 1px; }
.f3-who .f3-q { font-size: 14px; line-height: 1.45; margin-top: 1px; }

/* doctors parents recommend, at the top of "Recommended by" (Khushi, Oct 26: option C) */
.f3-docs { margin: 4px 0 10px; padding: 10px 12px; background: #EEF2E8; border-radius: 4px; }
.f3-docsh { font: 700 11px DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #2F6B45; margin-bottom: 6px; }
.f3-docl { display: flex; flex-wrap: wrap; gap: 6px; }
.f3-docl span { background: #FFFDF8; border: 1px solid #DCE5D3; border-radius: 100px; padding: 3px 11px; font-size: 13.5px; color: #6E6A62; }
.f3-docl b { color: #1F4535; font-weight: 600; }
/* green background + "+1" on each doctor (Khushi, Oct 26) */
.f3-docs { background: #DCE8D2; border: 1px solid #C6DAB8; }
.f3-docsh { color: #24502F; }
.f3-docl span { display: inline-flex; align-items: center; gap: 4px; background: #FFFDF8; border-color: #C6DAB8; padding: 3px 4px 3px 11px; }
.f3-plus { all: unset; cursor: pointer; margin-left: 6px; border: 1.5px solid #D46B3D; color: #B85A2E; background: #FFFDF8; border-radius: 100px; padding: 1px 9px; font: 600 12px DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.f3-plus:hover { background: #FBEDE4; }
.f3-plus.on { background: #2F6B45; border-color: #2F6B45; color: #fff; }
.f3-plus:focus-visible { outline: 2px solid #1F4535; outline-offset: 2px; }
/* +1: dark green outline, fills in on hover so it reads as a button (Khushi, Oct 26) */
.f3-plus { border: 1.5px solid #1F4535; color: #1F4535; background: #FFFDF8; padding: 2px 10px; transition: background .15s, color .15s; }
.f3-plus:hover { background: #1F4535; color: #fff; }
.f3-plus.on { background: #1F4535; border-color: #1F4535; color: #fff; }
.f3-docsh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.f3-docsh-tip { font: 500 12.5px DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 0; text-transform: none; color: #3E5F48; }
/* "+ Add a doctor" (Khushi, Oct 26) */
.f3-docadd { all: unset; cursor: pointer; border: 1.5px dashed #1F4535; color: #1F4535; border-radius: 100px; padding: 3px 12px; font: 600 13px DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.f3-docadd:hover { background: #FFFDF8; }
.f3-docbox { margin-top: 10px; background: #FFFDF8; border: 1px solid #C6DAB8; border-radius: 4px; padding: 12px 14px; }
.f3-docbox label b { font: 400 16px Georgia, serif; color: #1F4535; }
.f3-docrow { display: flex; gap: 8px; margin-top: 8px; }
.f3-docrow input { flex: 1; min-width: 0; border: 1px solid #E4DED2; border-radius: 8px; padding: 9px 12px; font: 15px DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #fff; }
.f3-docsend, .f3-docyes { border: 0; border-radius: 100px; background: #1F4535; color: #fff; padding: 9px 18px; font: 600 14px DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; cursor: pointer; }
.f3-docnote { margin: 6px 0 0; font-size: 12.5px; color: #6E6A62; }
.f3-docerr { margin: 4px 0 0; font-size: 13px; color: #A8432A; }
.f3-docerr:empty { display: none; }
.f3-docok { margin: 0 0 8px; font-size: 14px; color: #24502F; }
.f3-docfp { border-top: 1px solid #EFE6D5; padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.f3-docfp b { font: 400 17px Georgia, serif; color: #1F4535; }
.f3-docfp span { font-size: 13.5px; color: #6E6A62; }
.f3-docfpb { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
#tab-index .f3-docsend, #tab-index .f3-docyes { color: #fff !important; background: #1F4535 !important; }
/* "+ Add a doctor": a small pop-up card (Khushi, Oct 26: option B) */
.f3-dbg { position: fixed; inset: 0; z-index: 9999; background: rgba(31,69,53,.35); display: flex; align-items: center; justify-content: center; padding: 16px; }
.f3-dcard { position: relative; width: 100%; max-width: 400px; background: #FFFDF8; border-radius: 18px; padding: 26px 24px 20px; box-shadow: 0 24px 60px rgba(31,69,53,.25); font-family: DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #2A2A27; }
.f3-dx { all: unset; position: absolute; right: 14px; top: 10px; font-size: 22px; line-height: 1; color: #6E6A62; cursor: pointer; padding: 4px; }
.f3-dk { margin: 0 0 2px; font: 700 11px DM Sans, -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #B85A2E; padding-right: 24px; }
.f3-dcard h3 { margin: 0 0 4px; font: 400 24px Georgia, 'Times New Roman', serif; color: #1F4535; }
.f3-dsub { margin: 0 0 12px; font-size: 14.5px; line-height: 1.45; color: #4A4740; }
.f3-dsub b { color: #1F4535; }
.f3-dcard input { width: 100%; box-sizing: border-box; border: 1px solid #E4DED2; border-radius: 10px; padding: 11px 13px; font: 15px DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #fff; }
.f3-dcard input:focus { outline: none; border-color: #1F4535; box-shadow: 0 0 0 3px rgba(31,69,53,.10); }
.f3-derr { margin: 6px 0 0; font-size: 13px; color: #A8432A; }
.f3-derr:empty { display: none; }
.f3-dcard .f3-dmain { display: block; width: 100%; margin-top: 10px; border: 0; border-radius: 100px; background: #1F4535 !important; color: #fff !important; padding: 12px; font: 600 15px DM Sans, -apple-system, BlinkMacSystemFont, sans-serif; cursor: pointer; }
.f3-dcard .f3-dmain:disabled { opacity: .6; cursor: default; }
.f3-dfine { margin: 10px 0 0; font-size: 12.5px; color: #6E6A62; text-align: center; }
.f3-dtick { width: 44px; height: 44px; border-radius: 50%; background: #E6F0DD; color: #2F6B45; display: grid; place-items: center; font-size: 22px; margin-bottom: 10px; }
.f3-dfp { margin-top: 14px; padding-top: 14px; border-top: 1px solid #EFE6D5; display: flex; flex-direction: column; gap: 4px; }
.f3-dfp b { font: 400 18px Georgia, 'Times New Roman', serif; color: #1F4535; }
.f3-dfp span { font-size: 13.5px; color: #6E6A62; }
.f3-dlink { all: unset; cursor: pointer; margin-top: 10px; text-align: center; font-size: 13.5px; color: #6E6A62; text-decoration: underline; text-underline-offset: 3px; }
.f3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* "I recommend" pop-up (Khushi, Oct 26): same card as "Add a doctor", the share form's why tabs */
.f3-rcard { max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; }
.f3-rheart { color: #D46B3D; margin-right: 2px; }
.f3-rchips { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 4px; }
.f3-rchip { all: unset; box-sizing: border-box; cursor: pointer; border: 1.5px solid #E4DED2; background: #fff; color: #1F4535; border-radius: 100px; padding: 7px 13px; font: 500 14px DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.f3-rchip:hover { border-color: #1F4535; }
.f3-rchip:focus-visible { outline: 2px solid #1F4535; outline-offset: 2px; }
.f3-rchip[aria-pressed="true"] { background: #1F4535; border-color: #1F4535; color: #fff; }
.f3-rfp { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px; padding: 4px 12px; border-radius: 100px; background: #DCE8D2; color: #1F4535; font: 600 13px DM Sans, -apple-system, BlinkMacSystemFont, sans-serif; }
.f3-rfp img { width: 14px; height: 14px; }
.f3-rleft { text-align: left; margin: 0 0 4px; }
.f3-heart.on svg { fill: #D46B3D; stroke: #D46B3D; }
.f3-pb.f3-pr.on { background: #1F4535; border-color: #1F4535; }
.f3-pb.f3-pr.on svg { fill: currentColor; }
@media (max-width: 480px) { .f3-rchip { font-size: 13px; padding: 6px 11px; } .f3-dcard.f3-rcard { padding: 22px 18px 16px; } }
.f3-rcard .f3-dlink { display: block; width: 100%; }
.f3-rcredit { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 11px 13px; background: #fff; border: 1px solid #E4DED2; border-radius: 10px; cursor: pointer; font: 14.5px DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #1F4535; }
.f3-rcredit input { width: 18px; height: 18px; margin: 0; accent-color: #1F4535; flex: none; }
.f3-rcard .f3-rwho { margin-top: 6px; }
.f3-rterms a { color: #1F4535; text-decoration: underline; text-underline-offset: 2px; }
.f3-rcard .f3-rown { text-align: left; color: #1F4535; font-weight: 600; margin-top: 8px; }
.f3-rwords textarea { width: 100%; box-sizing: border-box; margin-top: 10px; border: 1px solid #E4DED2; border-radius: 10px; padding: 11px 13px; font: 15px/1.45 DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #fff; resize: vertical; }
.f3-rwords textarea:focus { outline: none; border-color: #1F4535; box-shadow: 0 0 0 3px rgba(31,69,53,.10); }
.f3-rwords .f3-rleft { margin-top: 4px; }
.f3-rcard [hidden] { display: none !important; }

/* visitors: locked after 12 (Khushi, Oct 26) */
.f3-locked { position: relative; margin-top: 14px; }
.f3-lockfade { pointer-events: none; user-select: none; filter: blur(3px); opacity: .55; max-height: 170px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 20%, transparent); mask-image: linear-gradient(#000 20%, transparent); }
.f3-lockfade .f3-grid, .f3-lockfade .f3-list { margin-top: 0; }
.f3-lockmsg { position: absolute; left: 0; right: 0; top: 34px; margin: 0 auto; max-width: 420px; background: #FFFDF8; border: 1px solid #E6DCC9; border-radius: 4px; box-shadow: 0 14px 34px rgba(31,69,53,.14); padding: 18px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 14.5px/1.4 DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #4A4740; }
.f3-lockmsg b { font: 600 16px DM Sans, -apple-system, BlinkMacSystemFont, sans-serif; color: #1F4535; }
.f3-lockbtn { margin-top: 10px; border: 0; border-radius: 100px; background: #1F4535; color: #fff !important; padding: 10px 24px; font: 600 15px DM Sans, -apple-system, BlinkMacSystemFont, sans-serif; cursor: pointer; }
.f3-locked { min-height: 190px; }
@media (max-width: 600px) { .f3-lockmsg { top: 20px; margin: 0 8px; } }
.f3-lockin { margin-top: 8px; font-size: 13.5px; color: #6E6A62; }
.f3-lockin .f3-link { font-size: 13.5px; font-weight: 600; color: #1F4535; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.f3-locked { min-height: 220px; }

/* Members (not Founding yet): the side box invites them to become a Founding Parent, with the 4 benefits (Khushi, Oct 26) */
.f3-recbox.f3-fpbox { background: #DCE8D2; border-color: #C6DAB8; }
.f3-recbox .f3-fptag { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 8px; padding: 3px 10px; border-radius: 100px; background: #FFFDF8; color: #1F4535; font: 600 12px DM Sans, -apple-system, BlinkMacSystemFont, sans-serif; }
.f3-fptag img { width: 13px; height: 13px; }
.f3-fpbox > span:not(.f3-fptag) { color: #3F5148; }
.f3-fpben { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 7px; }
.f3-fpben li { display: flex; align-items: center; gap: 9px; font: 500 13.5px DM Sans, -apple-system, BlinkMacSystemFont, sans-serif; color: #1F4535; }
.f3-fpben i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 11px DM Sans, -apple-system, sans-serif; font-style: normal; color: #1F4535; flex: none; }
.f3-recbox.f3-recbox-top { margin: 0 0 14px; }
/* phone: a short box under the search, before the places (Khushi, Oct 27) */
.f3-recbox.f3-recbox-m { margin: 4px 0 12px; padding: 12px 14px; }
.f3-recbox.f3-recbox-m b { font-size: 16px; margin: 0 0 10px; }
.f3-recbox.f3-recbox-m .f3-fptag { margin: 0 0 6px; }
.f3-recbox.f3-recbox-m > span:not(.f3-fptag) { display: none; }   /* the perks show on phones too (Khushi, Oct 27) */
.f3-recbox.f3-recbox-m .f3-recbtn { margin: 0 auto; }
#tab-index .f3-recbtn { color: #fff !important; }
.f3-who ul + .f3-docs { margin: 16px 0 4px; }

/* "Recommended by": first 3, then "See all N recommendations" (Khushi, Oct 27: option C) */
.f3-who li.f3-rbyall-li { display: block; border-top: 0; padding: 0; }
.f3-who .f3-rbyall { all: unset; box-sizing: border-box; display: block; width: 100%; margin-top: 10px; padding: 9px 12px; text-align: center; cursor: pointer;
  border: 1px solid #E4DED2; border-radius: 100px; font: 600 13.5px DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1F4535; }
.f3-who .f3-rbyall:hover { background: #F5EDE0; }
.f3-who .f3-rbyall:focus-visible { outline: 2px solid #1F4535; outline-offset: 2px; }

/* Location > In an area: Sheetal's areas, each with its neighborhoods in a small grey line (Khushi, Oct 27) */
.f3-cb.f3-area2 { align-items: flex-start; padding: 8px 4px; }
.f3-cb.f3-area2 .f3-box2 { margin-top: 1px; }
.f3-cb.f3-area2 .f3-al { font-size: 15px; }
.f3-area2 .f3-at { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.f3-area2 .f3-ah { font-size: 12px; line-height: 1.4; color: var(--f3-soft); font-weight: 400; }
.f3-area2 .f3-n { margin-top: 1px; }

/* Location areas (Khushi's pick, Oct 27): tick box + arrow to open the neighborhoods; "–" when only some are ticked */
.f3-zrow { display: flex; align-items: center; gap: 4px; }
.f3-zrow .f3-cb { flex: 1; min-width: 0; }
.f3-zcar { all: unset; cursor: pointer; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--f3-soft); }
.f3-zcar:hover { background: #F3ECE0; }
.f3-zcar:focus-visible { outline: 2px solid var(--f3-ink); outline-offset: 1px; }
.f3-zcar svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .2s; }
.f3-zcar.open svg { transform: rotate(180deg); }
.f3-zcar-x { width: 28px; flex: none; }
.f3-cb.part .f3-box2 { background: var(--f3-ink); border-color: var(--f3-ink); }
.f3-cb.part .f3-box2:after { content: ''; width: 9px; height: 2px; background: #fff; border-radius: 1px; }
.f3-zrest { margin: 2px 0 8px; padding-left: 4px; font-size: 12.5px; color: var(--f3-soft); }

/* Find's recommend box: dark green with a faint leaf outline behind (Khushi, Oct 27) */
.f3-recbox, .f3-recbox.f3-fpbox { position: relative; overflow: hidden; background: #1F4535; border-color: #1F4535; color: #F5EDE0; }
.f3-recbox > *:not(.f3-rleaf) { position: relative; }
.f3-rleaf { position: absolute; right: -50px; top: -60px; width: 230px; height: 230px; fill: none; stroke: #F5EDE0; stroke-width: 6; opacity: .1; pointer-events: none; }
.f3-recbox b { color: #F5EDE0; }
.f3-recbox > span:not(.f3-fptag), .f3-fpbox > span:not(.f3-fptag) { color: rgba(245,237,224,.82); }
.f3-recbox .f3-fpben li { color: #F5EDE0; }
.f3-recbox .f3-fptag { background: rgba(245,237,224,.14); color: #F5EDE0; }
.f3-recbox .f3-recbtn { background: #D46B3D; color: #fff; }
.f3-recbox .f3-recbtn:hover { background: #B85A2E; }
.f3-recbox .f3-recbtn { width: auto; padding: 8px 16px; font-size: 13.5px; font-weight: 600; }   /* smaller, not full width (Khushi, Oct 27) */
.f3-recbox b { margin-bottom: 12px; }
/* leaf tag and heading centered (Khushi, Oct 27) */
.f3-side .f3-recbox .f3-fptag, .f3-two .f3-recbox .f3-fptag { display: flex; width: fit-content; margin-left: auto !important; margin-right: auto !important; }
.f3-recbox b { text-align: center; }
/* everything in the box lines up in the middle: heading, line, perks, button (Khushi, Oct 27) */
.f3-recbox { text-align: center; }
.f3-recbox .f3-fpben { display: grid; width: fit-content; text-align: left; margin-left: auto; margin-right: auto; }
.f3-recbox .f3-recbtn { display: block; width: fit-content; margin-left: auto; margin-right: auto; }

/* ← Back to the page before Find (Khushi, Oct 27) */
.f3-back.f3-prev { display: inline-flex; align-items: center; margin: 0 0 10px; color: #1F4535; font-size: 14px; cursor: pointer; }
.f3-back.f3-prev:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- DRAFT place page (Khushi, Oct 29), only with &draft=1 ---------- */
.pb { max-width: 1180px; }
.pb-crumbs { font-size: 13.5px; color: #6E6A62; margin: 4px 0 14px; } .pb-crumbs a { color: #6E6A62; text-decoration: none; cursor: pointer; } .pb-crumbs a:hover { color: #1F4535; text-decoration: underline; }
.pb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.pb-head h1 { font: 400 clamp(32px, 4vw, 46px)/1.08 Georgia, 'Times New Roman', serif !important; letter-spacing: -.01em !important; color: #1F4535; margin: 0 0 10px; }
.pb-faces { display: flex; align-items: center; gap: 10px; color: #6E6A62; font-size: 15px; } .pb-faces .f3-faces { margin: 0; }
.pb-meta { margin-top: 8px; color: #6E6A62; font-size: 15px; } .pb-meta b { color: #1F4535; font-weight: 600; }
.pb-tags { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; }
.pb-tags span { border-radius: 99px; padding: 8px 16px; font-size: 14px; background: #E6EEDC; color: #1F4535; } .pb-tags span.on { background: #1F4535; color: #fff; }
.pb-info { display: grid; grid-template-columns: 1.5fr repeat(var(--pbn, 4), minmax(0, 1fr)); margin: 22px 0 16px; background: #FFFDF8; border: 1px solid #E6DCC9; border-radius: 16px; }
.pb-col { padding: 18px 18px; border-left: 1px solid #EEE7DA; min-width: 0; } .pb-col:first-child { border-left: 0; }
.pb-col h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 400 17px Georgia, serif !important; letter-spacing: 0 !important; color: #1F4535; }
.pb-ic { width: 30px; height: 30px; border-radius: 50%; background: #EEF2E6; display: grid; place-items: center; flex: none; } .pb-ic svg { width: 16px; height: 16px; fill: none; stroke: #1F4535; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pb-col p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: #4A4A45; overflow-wrap: anywhere; }
.pb-clamp { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.pb-soft { color: #6E6A62; }
.pb-out { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #DCD3C2; background: #fff; border-radius: 99px; padding: 7px 14px; font-size: 13.5px; font-weight: 600; color: #1F4535; text-decoration: none; }
.pb-web { display: block; margin-top: 10px; color: #C9603F; font-size: 14px; text-decoration: none; }
.pb-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.pb-rec, .pb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 99px; padding: 14px 18px; font: 600 15px DM Sans, -apple-system, sans-serif; cursor: pointer; }
.pb-rec { background: #D46B3D; color: #fff; border: 0; } .pb-rec.on { background: #B8562E; }
.pb-btn { background: #FFFDF8; border: 1px solid #E6DCC9; color: #1F4535; } .pb-btn.on { background: #E6EEDC; } .pb-btn.wide { width: 100%; }
.pb-rec svg, .pb-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pb-two { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pb-card { background: #FFFDF8; border: 1px solid #E6DCC9; border-radius: 16px; padding: 22px 24px; }
.pb-side { display: flex; flex-direction: column; gap: 16px; } .pb-side .pb-card { padding: 18px 18px; }
.pb-card h2 { font: 400 26px Georgia, serif !important; letter-spacing: -.01em !important; color: #1F4535; margin: 0 0 4px; } .pb-side .pb-card h2 { font-size: 21px !important; margin-bottom: 12px; }
.pb-ch { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #EEE7DA; }
.pb-write { flex: none; background: #D46B3D; color: #fff; border: 0; border-radius: 99px; padding: 11px 18px; font: 600 14px DM Sans, sans-serif; cursor: pointer; }
.pb-love { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 0 4px; font-size: 13.5px; } .pb-love span:not(.pb-soft) { background: #EEF2E6; border-radius: 99px; padding: 5px 12px; color: #1F4535; }
.pb-recs { list-style: none; margin: 0; padding: 0; }
.pb-recs li { display: flex; gap: 14px; padding: 20px 0; border-bottom: 1px solid #EEE7DA; }
.pb-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 400 20px Georgia, serif; color: #1F4535; }
.pb-rb { flex: 1; min-width: 0; } .pb-rt { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; color: #4A4A45; } .pb-rt b { color: #1F4535; font: 600 16px Georgia, serif; }
.pb-q { margin: 8px 0 0; font: italic 16.5px/1.55 Georgia, serif; color: #2F3B35; }
.pb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .pb-chips span { background: #F1EBDD; border-radius: 99px; padding: 6px 12px; font-size: 13.5px; color: #3F5148; }
.pb-all { display: block; width: 100%; margin-top: 18px; background: #fff; border: 1px solid #DCD3C2; border-radius: 99px; padding: 13px; font: 600 15px DM Sans, sans-serif; color: #1F4535; cursor: pointer; }
.pb-map { width: 100%; height: 200px; border: 0; border-radius: 12px; display: block; margin-bottom: 12px; }
.pb-qs { text-align: center; } .pb-qs p { margin: 6px 0 14px; font-size: 14.5px; line-height: 1.5; }
.pb-also { list-style: none; margin: 0; padding: 0; }
.pb-also li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #EEE7DA; cursor: pointer; } .pb-also li:first-child { border-top: 0; }
.pb-also b { display: block; font-weight: 500; font-size: 15px; color: #1F4535; } .pb-also .pb-soft { font-size: 13px; } .pb-also li > span { font-size: 22px; color: #1F4535; }
.pb-also li:hover b { text-decoration: underline; }
@media (max-width: 960px) {
  .pb-info { grid-template-columns: 1fr 1fr; } .pb-col { border-left: 0; border-top: 1px solid #EEE7DA; } .pb-col:first-child { grid-column: 1 / -1; border-top: 0; }
  .pb-acts { grid-template-columns: 1fr 1fr; } .pb-two { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pb-info { grid-template-columns: 1fr; } .pb-head h1 { font-size: 32px !important; }
  .pb-card { padding: 18px 16px; } .pb-ch { flex-direction: column; } .pb-q { font-size: 15.5px; }
  .pb { display: flex; flex-direction: column; } .pb-acts { order: 3; margin: 16px 0 0; } .pb-info { order: 4; margin: 14px 0; } .pb-two { order: 5; }
  .pb-clamp { -webkit-line-clamp: 4; } .pb-rec, .pb-btn { padding: 12px 10px; font-size: 14px; }
}

.pb-empty { margin: 16px 0 4px; font-size: 15px; color: #4A4A45; line-height: 1.5; }
.pb-docs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 0 4px; font-size: 13.5px; } .pb-docs span:not(.pb-soft) { background: #FFF; border: 1px solid #E6DCC9; border-radius: 99px; padding: 5px 12px; color: #1F4535; } .pb-docs b { font-weight: 600; }

.pb-review { padding: 16px 0 6px; border-bottom: 1px solid #EEE7DA; }
.pb-review textarea { width: 100%; box-sizing: border-box; border: 1px solid #E6DCC9; background: #fff; border-radius: 12px; padding: 12px 14px; font: 15px/1.5 DM Sans, -apple-system, sans-serif; color: #1F4535; resize: vertical; min-height: 84px; }
.pb-review textarea:focus { outline: 2px solid #1F4535; outline-offset: 1px; }
.f3-wrap .pb-rvrow .pb-post { font-size: 14.5px !important; padding: 10px 20px; }
.pb-rvrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; font-size: 13px; flex-wrap: wrap; }
.f3-wrap .pb-post { background: #1F4535; color: #fff !important; border: 0; border-radius: 99px; padding: 10px 20px; font: 600 14.5px DM Sans, sans-serif; cursor: pointer; }
.pb-rverr { margin: 6px 0 0; color: #B3452A; font-size: 13.5px; } .pb-rverr:empty { display: none; }
.pb-thanks { margin: 14px 0 0; padding: 12px 14px; background: #EEF2E6; border-radius: 12px; font-size: 14.5px; color: #1F4535; }
.pb-qlist { list-style: none; margin: 0 0 14px; padding: 0; }
.pb-qlist li { padding: 11px 0; border-top: 1px solid #EEE7DA; cursor: pointer; } .pb-qlist li:first-child { border-top: 0; }
.pb-qlist b { display: block; font-weight: 500; font-size: 15px; color: #1F4535; line-height: 1.4; } .pb-qlist li:hover b { text-decoration: underline; } .pb-qlist .pb-soft { font-size: 13px; }

.pb-qic { display: block; width: 76px; height: 58px; margin: 6px auto 4px; fill: none; stroke: #1F4535; stroke-width: 2; stroke-linejoin: round; }
.pb-qa h2, .pb-qs h2 { text-align: left; }
.pb-review[hidden] { display: none; }

.pb-faces .f3-faces i { width: 30px; height: 30px; font-size: 13px; margin-right: -4px; border-width: 2px; }
.pb-faces { gap: 14px; font-size: 16px; margin: 4px 0 2px; }

/* draft place page on phones: Save as a bookmark by the name, the 4 actions as an icon bar at the bottom (Khushi, Oct 29) */
.pb-nrow { display: flex; align-items: flex-start; gap: 12px; }
.pb-mark { display: none; flex: none; width: 42px; height: 42px; margin-top: 2px; border-radius: 50%; border: 1px solid #E6DCC9; background: #fff; place-items: center; cursor: pointer; color: #1F4535; }
.pb-mark svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; } .pb-mark.on svg { fill: #1F4535; }
.pb-mbar { display: none; }
@media (max-width: 700px) {
  .pb-mark { display: grid; }
  .pb-acts { display: none !important; }
  .pb-mbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 9001; background: #1F4535; border-top: 0; box-shadow: 0 -6px 18px rgba(20,48,36,.18); padding: 8px 6px calc(10px + env(safe-area-inset-bottom)); }
  .pb-mbar button { border: 0; background: none; padding: 8px 0; display: grid; place-items: center; cursor: pointer; color: #fff; }
  .pb-mbar svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .pb-mbar button:first-child { color: #F2A07B; } .pb-mbar button.on svg { fill: #F2A07B; }
  .pb { padding-bottom: 84px; }
}

/* "Parents love it for" card (Khushi, Oct 29) */
.pb-lovelist { list-style: none; margin: 0 0 6px; padding: 0; }
.pb-lovelist li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #EEE7DA; } .pb-lovelist li:first-child { border-top: 0; }
.pb-lovelist.pb-more { margin-top: -6px; } .pb-lovelist.pb-more li:first-child { border-top: 1px solid #EEE7DA; }
.pb-tag { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; color: #1F4535; }
.pb-thumb { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 62px; min-height: 34px; border: 1px solid #E6DCC9; background: #fff; border-radius: 99px; padding: 6px 12px; font: 600 13.5px DM Sans, sans-serif; color: #6E6A62; cursor: pointer; }
.pb-thumb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pb-thumb b { font-weight: 600; } .pb-thumb:hover { border-color: #3F7A55; color: #3F7A55; }
.pb-lovelist li.on .pb-thumb { background: #3F7A55; border-color: #3F7A55; color: #fff; }
.pb-link { background: none; border: 0; padding: 0 0 12px; color: #1F4535; font: 600 14px DM Sans, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pb-addtag { display: inline-flex; align-items: center; margin-top: 6px; background: none; border: 1.5px dashed #CFC6B4; border-radius: 99px; padding: 7px 15px; font: 500 14px DM Sans, sans-serif; color: #6E6A62; cursor: pointer; } .pb-addtag:hover { border-color: #3F7A55; color: #3F7A55; }
@media (max-width: 700px) {   /* phone: what parents love first, then what they say (Khushi, Oct 29) */
  .pb-two { display: flex; flex-direction: column; gap: 14px; } .pb-side { display: contents; } .pb-two > *, .pb-side > .pb-card { align-self: stretch; }
  .pb-doccard { order: 1; } .pb-lovecard { order: 1; } .pb-saying { order: 2; } .pb-side > .pb-card:not(.pb-lovecard):not(.pb-doccard) { order: 3; }
}

/* the Folkle recommendation count under the name stands out (Khushi, Oct 29) */
.pb-count { display: inline-flex; align-items: center; gap: 6px; background: #1F4535; color: #fff; border-radius: 99px; padding: 6px 14px; font-size: 15px; font-weight: 600; }
.pb-count b { font-size: 17px; font-weight: 700; } .pb-count svg { width: 17px; height: 17px; fill: #3F7A55; stroke: none; }
.pb-faces { flex-wrap: wrap; row-gap: 10px; } .pb-count { white-space: nowrap; }
@media (max-width: 400px) { .pb-faces { gap: 10px; } .pb-count { font-size: 14px; padding: 5px 12px 5px 10px; } .pb-count b { font-size: 16px; } }

/* "I recommend it" (Khushi, Oct 29): phone = two short steps, laptop = one wider card side by side; button stays green */
.f3-dcard.f3-rcard.rb { max-width: 760px; }
.rb .rb-cols { display: grid; grid-template-columns: 1.45fr 1fr; gap: 26px; margin-top: 10px; }
.rb .rb-side { border-left: 1px solid #EEE7DA; padding-left: 24px; display: flex; flex-direction: column; }
.rb .rb-side .f3-dmain { margin-top: auto; }
.rb .rb-step, .rb .rb-back, .rb .rb-next, .rb .rb-ph { display: none; }
.rb .rb-q { margin: 0 0 10px; font: 600 14px DM Sans, sans-serif; color: #1F4535; }
.rb .rb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.rb .rb-grid .f3-rchip { border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.25; white-space: normal; }
.rb .rb-grid .f3-rchip[aria-pressed="true"] { background: #EEF2E6; border-color: #3F7A55; color: #1F4535; font-weight: 600; }
.rb .rb-grid .f3-rchip[aria-pressed="true"]::before { content: '✓ '; color: #3F7A55; }
.rb .rb-links { margin: 2px 0 0; font-size: 13.5px; color: #6E6A62; }
.rb .rb-links .f3-dlink { display: block; width: 100%; box-sizing: border-box; margin: 4px 0 0; padding: 11px 12px; border: 1.5px dashed #CFC6B4; border-radius: 12px; text-align: left; font: 500 14px DM Sans, -apple-system, BlinkMacSystemFont, sans-serif; color: #1F4535; text-decoration: none; }
.rb .rb-links .f3-dlink:hover { border-color: #3F7A55; }   /* like "+ Add a tag" (Khushi, Oct 29) */
.rb .rb-as { display: grid; gap: 8px; margin-bottom: 14px; }
.rb .rb-as label { display: flex; align-items: center; gap: 10px; border: 1.5px solid #E4DED2; border-radius: 12px; padding: 11px 12px; background: #fff; cursor: pointer; font: 500 14.5px DM Sans, sans-serif; color: #1F4535; }
.rb .rb-as label:has(input:checked) { border-color: #1F4535; background: #EEF2E6; }
.rb .rb-as input { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: #1F4535; flex: none; }
@media (max-width: 700px) {
  .f3-dbg:has(.rb) { align-items: flex-end; padding: 0; }
  .f3-dcard.f3-rcard.rb { max-width: none; border-radius: 22px 22px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .rb .rb-lap { display: none; }
  .rb .rb-cols { display: block; margin-top: 4px; }
  .rb .rb-step { display: block; margin: 0 0 4px; font: 600 12px DM Sans, sans-serif; color: #6E6A62; }
  .rb .rb-q { font: 400 24px Georgia, serif; margin: 0 0 12px; }
  .rb .rb-next, .rb .rb-ph { display: block; } .rb .rb-ph { margin: -6px 0 12px; }
  .rb .rb-side { display: none; border: 0; padding: 0; }
  .rb.rb-s2 .rb-tags { display: none; } .rb.rb-s2 .rb-side { display: flex; }
  .rb .rb-back { display: block; text-align: center; margin-top: 8px; }
}

/* "Parents who recommend", compact (Khushi, Oct 29: A, with names) */
.pb-recs li { gap: 12px; padding: 13px 0; border-bottom: 0; border-top: 1px solid #EEE7DA; } .pb-recs li:first-child { border-top: 0; }
.pb-av { width: 34px; height: 34px; font: 600 14px DM Sans, sans-serif; }
.pb-rt { font-size: 14.5px; color: #6E6A62; } .pb-rt b { font: 600 15px DM Sans, sans-serif; color: #1F4535; }
.pb-q { margin: 3px 0 0; font: 15px/1.5 DM Sans, sans-serif; color: #2F3B35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pb-recs li.open .pb-q { display: block; -webkit-line-clamp: unset; }
.pb-qmore { background: none; border: 0; padding: 0; margin-top: 2px; font: 600 13px DM Sans, sans-serif; color: #1F4535; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pb-chips { gap: 6px; margin-top: 7px; } .pb-chips span { padding: 3px 10px; font-size: 12.5px; }
.pb-all { margin-top: 10px; padding: 10px; font-size: 14px; }
.pb-alsoby { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; padding-top: 14px; border-top: 1px solid #EEE7DA; font-size: 14px; }
.pb-alsoby > .pb-soft { width: 100%; font-size: 13px; }
.pb-who { display: inline-flex; align-items: center; gap: 7px; color: #1F4535; font-weight: 500; }
.pb-who i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 11.5px DM Sans, sans-serif; font-style: normal; }
.pb-anon { color: #6E6A62; font-weight: 400; }
.pb-ch { padding-bottom: 12px; align-items: center; }
.f3-wrap .pb-write { background: #fff; color: #D46B3D; border: 1.5px solid #D46B3D; padding: 8px 15px; }
.f3-wrap .pb-write:hover { background: #FBEDE5; }
@media (max-width: 700px) { .pb-ch { align-items: flex-start; } .pb-q { font-size: 15px; } }
.pb-recs:not(.all) li:nth-child(n+4) { display: none; }
.pb-qmore[hidden] { display: none; }

/* "Parents also viewed" across the bottom: a swipe row of Find-style cards, then "Find more" (Khushi, Oct 29) */
.pb-alsocard { margin-top: 18px; }
.pb-alsohd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .pb-alsohd h2 { margin: 0 !important; }
.pb-arrows { display: flex; gap: 8px; } .pb-arrows button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #DCD3C2; background: #fff; color: #1F4535; font-size: 20px; line-height: 1; cursor: pointer; } .pb-arrows button:hover { border-color: #1F4535; }
.pb-alsorow { list-style: none; margin: 0; padding: 0 0 6px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pb-alsorow::-webkit-scrollbar { display: none; }
.pb-alsorow li { flex: 0 0 236px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 5px; background: #fff; border: 1px solid #E6DCC9; border-radius: 4px; padding: 14px 15px; cursor: pointer; }
.pb-alsorow li:hover { border-color: #1F4535; }
.pb-alsorow b { font: 400 18px/1.2 Georgia, serif; color: #1F4535; }
.pb-alsorow .pb-soft { font-size: 12.5px; }
.pb-al { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6E6A62; } .pb-al svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.pb-al .f3-far { font: inherit !important; color: inherit !important; } .pb-alk { color: #B4532A; font-weight: 600; }
.pb-alsorow q { margin-top: 4px; font: italic 13px/1.4 Georgia, serif; color: #3F5148; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pb-alsorow li.pb-findmore { flex-basis: 150px; justify-content: space-between; background: #EEF2E6; border: 1.5px dashed #3F7A55; }
.pb-findmore span { font-size: 14px; color: #3F7A55; } .pb-findmore span b { font: 600 16px/1.3 DM Sans, sans-serif; color: #1F4535; }
.pb-findmore i { font-style: normal; font-size: 24px; color: #1F4535; }
@media (max-width: 700px) {
  .pb-alsocard { margin-top: 14px; order: 6; }
  .pb-arrows { display: none; }
  .pb-alsorow li { flex-basis: 72%; } .pb-alsorow li.pb-findmore { flex-basis: 46%; }
}

/* "Also recommended by" as circles; tap to see who (Khushi, Oct 29) */
.pb-circles { display: flex; flex-wrap: wrap; padding-left: 4px; }
.pb-circ { width: 32px; height: 32px; margin-left: -4px; border-radius: 50%; border: 2px solid #FFFDF8; display: grid; place-items: center; font: 600 13px DM Sans, sans-serif; color: #6E6A62; cursor: pointer; padding: 0; position: relative; transition: transform .15s; }
.pb-circ:hover { transform: translateY(-2px); z-index: 1; }
.pb-circ.on { transform: translateY(-3px); box-shadow: 0 0 0 2px #1F4535; z-index: 2; }
.pb-circ-anon { background: #1F4535 !important; color: #fff !important; font-size: 12.5px; }
.pb-whois { margin: 0 0 0 4px; font-size: 13.5px; color: #8A8478; min-height: 20px; } .pb-whois.shown { color: #1F4535; font-weight: 600; }
.pb-circles:not(.all) .pb-circ-more { display: none; }   /* 4 circles, then +N (Khushi, Oct 29) */

/* the 4 actions as round buttons next to the name (laptop), and a slim bar that slides in when you scroll (Khushi, Oct 29) */
.pb-head { align-items: flex-start; }
.pb-head .pb-tags { margin-top: 14px; }
.pb-icons { display: flex; gap: 12px; flex: none; }
.pb-ic { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 82px; white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; font: 500 13px DM Sans, sans-serif; color: #1F4535; }
.pb-ic > span { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #FFFDF8; border: 1px solid #E1D7C5; transition: transform .15s, background .2s, border-color .2s; }
.pb-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pb-ic:hover > span { transform: translateY(-2px); border-color: #1F4535; }
.pb-ic-rec > span { background: #D46B3D; border-color: #D46B3D; color: #fff; } .pb-ic-rec:hover > span { border-color: #B8562E; }
.pb-ic.on > span svg { fill: currentColor; } .pb-ic-rec.on > span { background: #B8562E; } .pb-ic:not(.pb-ic-rec).on > span { background: #E6EEDC; border-color: #3F7A55; }
.pb-ic.pop > span { animation: pbpop .35s; } @keyframes pbpop { 40% { transform: scale(1.14); } }
.pb-stick { position: fixed; left: 0; right: 0; z-index: 8000; display: flex; align-items: center; gap: 16px; padding: 10px max(24px, calc((100vw - 1180px) / 2)); background: rgba(255,253,248,.97); border-bottom: 1px solid #E6DCC9; box-shadow: 0 6px 18px rgba(31,69,53,.08); transform: translateY(-120%); visibility: hidden; transition: transform .3s, visibility 0s .3s; }
.pb-stick.show { transform: none; visibility: visible; transition: transform .3s; }
.pb-stick > b { flex: 1; min-width: 0; font: 400 21px Georgia, serif; color: #1F4535; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-icons.sm { gap: 10px; } .pb-icons.sm .pb-ic { width: auto; flex-direction: row; gap: 8px; font-size: 13.5px; }
.pb-icons.sm .pb-ic > span { width: 38px; height: 38px; } .pb-icons.sm .pb-ic svg { width: 18px; height: 18px; }
.pb-icons.sm .pb-ic:not(:first-child) { font-size: 0; gap: 0; }   /* the bar: only Recommend keeps its word */
@media (max-width: 700px) { .pb-head .pb-icons, .pb-stick { display: none; } }
.f3-wrap .pb-ic { height: auto !important; min-height: 0 !important; } .f3-wrap .pb-ic > span { flex: none; height: 56px !important; } .f3-wrap .pb-icons.sm .pb-ic > span { height: 38px !important; }

/* option 3: a little green dock under the name (laptop), floating at the bottom once you scroll past it (Khushi, Oct 29) */
.pb-dockwrap { display: flex; justify-content: center; margin: 4px 0 20px; }
.pb-dock { display: flex; align-items: flex-end; gap: 6px; background: #1F4535; border-radius: 24px; padding: 8px 10px; box-shadow: 0 14px 30px rgba(31,69,53,.25); }
.f3-wrap .pb-dock .pb-ic { width: auto; height: auto !important; padding: 6px 14px; gap: 5px; color: #fff; border-radius: 16px; font: 600 12.5px DM Sans, sans-serif; }
.f3-wrap .pb-dock .pb-ic > span { width: 46px; height: 46px !important; border-radius: 14px; background: rgba(255,255,255,.1); border: 0; transition: transform .18s, background .18s; }
.f3-wrap .pb-dock .pb-ic:hover > span { transform: translateY(-6px) scale(1.15); border: 0; }
.f3-wrap .pb-dock .pb-ic-rec > span { background: #D46B3D; }
.f3-wrap .pb-dock .pb-ic.on > span { background: rgba(255,255,255,.28); } .f3-wrap .pb-dock .pb-ic-rec.on > span { background: #B8562E; }
.pb-dockfloat { position: fixed; left: 50%; bottom: 22px; z-index: 8000; transform: translate(-50%, 140%); visibility: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s .35s; }
.pb-dockfloat.show { transform: translate(-50%, 0); visibility: visible; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.pb-head .pb-icons, .pb-stick { display: none !important; }
@media (max-width: 700px) {   /* phone: the same green dock, always floating at the bottom (Khushi, Oct 29: "i like that dock for phone") */
  .pb-dockwrap, .pb-mbar { display: none !important; }
  .pb-dockfloat, .pb-dockfloat.show { display: flex; visibility: visible; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom)); gap: 2px; padding: 7px 8px; border-radius: 22px; transition: none; }
  .f3-wrap .pb-dockfloat .pb-ic { padding: 4px 9px; font-size: 11.5px; }
  .f3-wrap .pb-dockfloat .pb-ic > span { width: 44px; height: 44px !important; }
  .f3-wrap .pb-dockfloat .pb-ic:hover > span { transform: none; }
  .pb-mark { display: none !important; }   /* Save is in the dock now */
  .pb { padding-bottom: 110px; }
}
body.fk-fpbar-pad .pb-dockfloat { bottom: 100px; }   /* sit above the Founding Parent bar when it shows */

/* laptop too: no dock under the name, the dock just floats at the bottom from the start (Khushi, Oct 29: "i dont like it on top") */
.pb-dockwrap { display: none !important; }
.pb-dockfloat, .pb-dockfloat.show { transform: translateX(-50%); visibility: visible; transition: none; }
.pb { padding-bottom: 110px; }

/* header: count and info on one line (Khushi, Oct 29) */
.pb-faces .pb-meta { margin: 0; color: #6E6A62; font-size: 15px; }
.pb-head .pb-tags { display: none; }
.pb-head { margin-bottom: 18px; }

/* laptop: the actions as a quiet line of words under the name (Khushi, Oct 29: C) */
.pb-links { display: flex; align-items: center; gap: 0; margin-top: 16px; flex-wrap: wrap; }
.f3-wrap .pb-links .pb-ic { flex-direction: row; width: auto; gap: 7px; padding: 4px 18px; font: 600 14.5px DM Sans, sans-serif; color: #1F4535; border-left: 1px solid #D9CFBD; border-radius: 0; white-space: nowrap; }
.f3-wrap .pb-links .pb-ic:first-child { padding-left: 0; border-left: 0; }
.f3-wrap .pb-links .pb-ic > span { width: auto; height: auto !important; background: none !important; border: 0 !important; border-radius: 0; }
.f3-wrap .pb-links .pb-ic svg { width: 18px; height: 18px; }
.f3-wrap .pb-links .pb-ic:hover { text-decoration: underline; text-underline-offset: 4px; } .f3-wrap .pb-links .pb-ic:hover > span { transform: none; }
.f3-wrap .pb-links .pb-ic-rec { color: #D46B3D; } .f3-wrap .pb-links .pb-ic-rec > span { color: #D46B3D; }
.f3-wrap .pb-links .pb-ic.on svg { fill: currentColor; }
/* phone: small round icons down the right side (Khushi, Oct 29: B) */
.pb-rail { display: none; }
@media (max-width: 700px) {
  .pb-links { display: none; }
  .pb-rail { display: flex; flex-direction: column; gap: 10px; position: fixed; right: 10px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 8000; }
  .f3-wrap .pb-rail .pb-ic { width: 46px; height: 46px !important; font-size: 0; gap: 0; }
  .f3-wrap .pb-rail .pb-ic > span { width: 46px; height: 46px !important; border-radius: 50%; background: #FFFDF8; border: 1px solid #DCD3C2; color: #1F4535; box-shadow: 0 6px 16px rgba(31,69,53,.16); }
  .f3-wrap .pb-rail .pb-ic svg { width: 20px; height: 20px; }
  .f3-wrap .pb-rail .pb-ic-rec > span { background: #D46B3D; border-color: #D46B3D; color: #fff; }
  .f3-wrap .pb-rail .pb-ic.on:not(.pb-ic-rec) > span { background: #E6EEDC; border-color: #3F7A55; }
  .f3-wrap .pb-rail .pb-ic:hover > span { transform: none; }
  .pb { padding-bottom: 40px; }
}
.pb { padding-bottom: 40px; }

/* laptop links: easier to see (Khushi, Oct 29: "not really visible"): each word gets its icon in a soft round badge, Recommend in solid orange */
.pb-links { margin-top: 20px; gap: 6px; }
.f3-wrap .pb-links .pb-ic { border-left: 0; padding: 6px 16px 6px 6px; gap: 10px; font-size: 15.5px; border-radius: 99px; transition: background .15s; }
.f3-wrap .pb-links .pb-ic:first-child { padding-left: 6px; }
.f3-wrap .pb-links .pb-ic > span { width: 38px; height: 38px !important; border-radius: 50% !important; background: #E3ECDD !important; display: grid; place-items: center; }
.f3-wrap .pb-links .pb-ic-rec > span { background: #D46B3D !important; color: #fff; }
.f3-wrap .pb-links .pb-ic:hover { background: #FFFDF8; text-decoration: none; box-shadow: 0 0 0 1px #E1D7C5; }
.f3-wrap .pb-links .pb-ic.on:not(.pb-ic-rec) > span { background: #1F4535 !important; color: #fff; }
.f3-wrap .pb-acts .pb-rec { color: #fff !important; } .f3-wrap .pb-acts .pb-rec svg { stroke: #fff; }   /* white words on the orange button */

/* the 3 buttons next to I recommend: white with a dark green outline (Khushi, Oct 29: the green-outline picture) */
.f3-wrap .pb-acts .pb-btn { background: #fff; border: 2px solid #1F4535; color: #1F4535; }
.f3-wrap .pb-acts .pb-btn.on { background: #fff; } .f3-wrap .pb-acts .pb-btn.on svg { fill: #1F4535; }
.f3-wrap .pb-acts .pb-btn:hover { background: #EEF2E6; }

/* the count as a big orange number (Khushi, Oct 29: B) */
.pb-stat { gap: 18px !important; align-items: center !important; margin: 6px 0 4px; }
.pb-big { display: inline-flex; align-items: center; gap: 10px; }
.pb-big b { font: 400 44px/1 Georgia, 'Times New Roman', serif; color: #D46B3D; }
.pb-big > span { font: 600 15.5px/1.25 DM Sans, sans-serif; color: #1F4535; }
.pb-big small { display: block; font: 400 14px/1.3 DM Sans, sans-serif; color: #6E6A62; }
.pb-vr { width: 1px; height: 36px; background: #D9CFBD; }
.pb-where { display: inline-flex; align-items: center; gap: 6px; color: #6E6A62; font-size: 15px; } .pb-where svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 700px) { .pb-stat { flex-wrap: wrap; row-gap: 10px; } .pb-vr { display: none; } .pb-where { width: 100%; font-size: 14.5px; } .pb-big b { font-size: 40px; } }
.pb-stat { margin-bottom: 10px !important; }
.pb-big b { font: 700 40px/1 DM Sans, -apple-system, sans-serif !important; letter-spacing: -.02em; }   /* the number in DM Sans (Khushi, Oct 29) */
@media (max-width: 700px) { .pb-big b { font-size: 36px !important; } }
.pb-big b { font: 400 40px/1 DM Sans, -apple-system, sans-serif !important; letter-spacing: -.055em !important; color: #1F4535 !important; }   /* the same as the 180 on Home (Khushi, Oct 29) */
@media (max-width: 700px) { .pb-big b { font-size: 34px !important; } }
/* About / Address / Phone / Hours: separate cards like the category cards on Home (Khushi, Oct 29) */
.pb-info { gap: 12px; background: none !important; border: 0 !important; border-radius: 0 !important; }
.pb-col { background: #FFFDF8; border: 1px solid #E6DCC9 !important; border-radius: 4px; padding: 16px 16px 14px; }
.pb-col h3 { flex-direction: column; align-items: flex-start !important; gap: 8px !important; margin: 0 0 8px !important; font: 600 16px DM Sans, -apple-system, sans-serif !important; color: #2A2A2A !important; }
.pb-col h3 > span, .pb-col h3 > i { background: none !important; width: auto !important; height: auto !important; padding: 0 !important; border-radius: 0 !important; }
.pb-col h3 svg { width: 26px !important; height: 26px !important; stroke: #1F4535; stroke-width: 1.6; fill: none; }
.pb-col p { font-size: 13px; color: #6A665E; }
@media (max-width: 700px) { .pb-info { gap: 10px; } .pb-col:first-child { grid-column: auto; } }
@media (max-width: 700px) { .pb-info { grid-template-columns: 1fr 1fr !important; } .pb-col:nth-child(-n+2) { grid-column: 1 / -1 !important; } }   /* phone: About and Address full width, Phone and Hours side by side */
/* Parents love it for / Parents who recommend / Location / Parents also viewed: the same cards as Home (Khushi, Oct 29) */
.f3-wrap .pb-card { border-radius: 4px; border: 1px solid #E6DCC9; background: #FFFDF8; padding: 22px 24px; }
.f3-wrap .pb-card h2, .f3-wrap .pb-side .pb-card h2 { font: 400 22px Georgia, 'Times New Roman', serif !important; color: #1F4535; letter-spacing: 0 !important; }
.f3-wrap .pb-map { border-radius: 4px; }
@media (max-width: 700px) { .f3-wrap .pb-card { padding: 18px 16px; } .f3-wrap .pb-card h2, .f3-wrap .pb-side .pb-card h2 { font-size: 21px !important; } }

/* phone: the green bar at the bottom again (Khushi, Oct 29: C); laptop keeps the 4 buttons */
.pb-dockfloat { display: none !important; }
@media (max-width: 700px) { .pb-dockfloat { display: flex !important; visibility: visible !important; transform: translateX(-50%) !important; } .pb-rail { display: none !important; } .pb { padding-bottom: 110px !important; } }
/* easier to read: the small grey text a bit bigger and darker (Khushi, Oct 29) */
.pb-col p { font-size: 14.5px !important; color: #4A4A45 !important; }
.pb-alsoby > .pb-soft, .pb-rt span { color: #55534D; }

/* section titles: the same style as Address / Phone / Hours, a bit bigger because they head whole sections (Khushi, Oct 29) */
.pb-secic { display: block; width: 28px; height: 28px; margin-bottom: 8px; fill: none; stroke: #1F4535; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.f3-wrap .pb-card h2, .f3-wrap .pb-side .pb-card h2 { font: 600 20px DM Sans, -apple-system, sans-serif !important; color: #2A2A2A !important; letter-spacing: -.005em !important; }
.pb-alsorow b { font: 600 15.5px DM Sans, -apple-system, sans-serif !important; color: #1F4535 !important; }
.pb-alsohd { align-items: flex-end !important; }
@media (max-width: 700px) { .f3-wrap .pb-card h2, .f3-wrap .pb-side .pb-card h2 { font-size: 19px !important; } }

/* the left column can hold cards moved from the right so both columns end level (Khushi, Oct 29) */
.pb-lcol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pb-side { gap: 16px; }
@media (max-width: 700px) { .pb-lcol { display: contents; } }

/* no empty space on any place (Khushi, Oct 29): comments full width, then the other cards side by side, all the same height */
@media (min-width: 701px) {
  .pb-two { display: block !important; }
  .pb-lcol { display: block; }
  .pb-side { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: stretch; margin-top: 16px; }
  .pb-side > .pb-card { margin: 0 !important; }
}
.pb-lochd { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 12px; } .pb-lochd h2 { margin: 0 !important; }
.pb-lochd .pb-out { margin: 0 0 2px; white-space: nowrap; }
.f3-wrap .pb-loccard .pb-map { height: 170px; margin: 0; }

/* "Parents also viewed" sits in the card row as a carousel: one place at a time on laptop (Khushi, Oct 29) */
@media (min-width: 701px) {
  .pb-side .pb-alsocard { margin-top: 0 !important; display: flex; flex-direction: column; }
  .pb-side .pb-alsorow { gap: 0; flex: 1; }
  .pb-side .pb-alsorow li { flex: 0 0 100%; box-sizing: border-box; }
  .pb-side .pb-alsorow li.pb-findmore { flex-basis: 100%; }
  .pb-side .pb-arrows button { width: 32px; height: 32px; font-size: 18px; }
}
@media (min-width: 701px) { .pb-side { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .pb-side:has(> .pb-card:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .pb-side:not(:has(> .pb-card:nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }   /* 3 cards in a row; 4 cards as 2 by 2; 2 cards half and half */

/* laptop: smaller buttons on the same line as the count and where, on the right (Khushi, Oct 29) */
.pb-head > div:first-child { flex: 1; min-width: 0; }
.pb-stat { flex-wrap: wrap; row-gap: 14px; }
@media (min-width: 701px) {
  .pb .pb-stat .pb-acts { display: flex !important; gap: 8px; margin: 0 0 0 auto !important; }
  .pb .pb-acts .pb-rec, .pb .pb-acts .pb-btn { padding: 9px 16px; font-size: 14px; gap: 7px; border-width: 1.5px; white-space: nowrap; }
  .pb .pb-acts svg { width: 16px; height: 16px; }
}

/* laptop (Khushi, Oct 29): two columns again. Left: Parents who recommend, then Location. Right: Parents also viewed, Doctors, Parents love it for.
   Both columns end on the same line: the last card in each column stretches to the bottom, so there is never an empty patch. */
@media (min-width: 701px) {
  .pb-two { display: grid !important; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) !important; gap: 16px; align-items: stretch !important; }
  .pb-lcol, .pb-side { display: flex !important; flex-direction: column; gap: 16px; margin-top: 0 !important; grid-template-columns: none !important; }
  .pb-lcol > .pb-card:last-child, .pb-side > .pb-card:last-child { flex: 1 1 auto; }
  .pb-side .pb-alsocard { flex: 0 0 auto; }
  .pb-side .pb-alsocard:last-child { flex: 1 1 auto; }
}
@media (max-width: 700px) { .pb-loccard { order: 3; } .pb-alsocard { order: 4; } }
@media (min-width: 701px) { .pb-loccard { display: flex; flex-direction: column; } .f3-wrap .pb-loccard .pb-map { flex: 1 1 auto; height: auto; min-height: 170px; } }   /* a taller Location card shows a taller map, not white space */
@media (max-width: 700px) { .pb-col:last-child:nth-child(odd) { grid-column: 1 / -1 !important; } }   /* phone: no half-empty row in the info cards */

/* Location and Parents also viewed side by side under the two columns (Khushi, Oct 29) */
.pb-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; align-items: stretch; }
.pb-row2 > .pb-card { margin: 0 !important; }
.pb-row2:not(:has(> .pb-card:nth-child(2))) { grid-template-columns: 1fr; }
.pb-row2 .pb-alsocard { display: flex; flex-direction: column; }
.pb-row2 .pb-alsorow { gap: 0; flex: 1; } .pb-row2 .pb-alsorow li, .pb-row2 .pb-alsorow li.pb-findmore { flex: 0 0 100%; box-sizing: border-box; }
.pb-row2 .pb-arrows button { width: 32px; height: 32px; font-size: 18px; }
.pb-row2 .pb-loccard { display: flex; flex-direction: column; } .f3-wrap .pb-row2 .pb-loccard .pb-map { flex: 1 1 auto; height: auto; min-height: 170px; }
@media (max-width: 700px) { .pb-row2 { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; } .pb-row2 .pb-alsorow li { flex: 0 0 72% !important; } .pb-row2 .pb-alsorow li.pb-findmore { flex-basis: 46% !important; } }
@media (max-width: 700px) { .pb-row2 { order: 6; } }   /* phone: Location and also viewed after the comments */

/* FINAL laptop layout (Khushi, Oct 29: "this stays the exact same, parents also viewed moves up"):
   the live layout (left: Parents who recommend; right: Doctors, Parents love it for, Location), with Parents also viewed moved up under the comments */
@media (min-width: 701px) {
  .pb-two { display: grid !important; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) !important; gap: 16px; align-items: start !important; }
  .pb-lcol, .pb-side { display: flex !important; flex-direction: column; gap: 16px; margin-top: 0 !important; grid-template-columns: none !important; }
  .pb-lcol > .pb-card, .pb-side > .pb-card { flex: 0 0 auto !important; }
  .pb-lcol .pb-alsocard { margin-top: 0 !important; }
  .pb-lcol .pb-alsorow { gap: 12px; } .pb-lcol .pb-alsorow li { flex: 0 0 236px; } .pb-lcol .pb-alsorow li.pb-findmore { flex-basis: 150px; }
}

/* "Remove my recommendation": a clear second button, not a faint link (Khushi, Oct 29) */
.f3-rcard .f3-rback { display: block; width: 100%; margin-top: 8px; padding: 11px; border-radius: 100px; background: #fff; border: 1.5px solid #E4DED2; color: #B4532A; font: 600 14.5px DM Sans, sans-serif; cursor: pointer; }
.f3-rcard .f3-rback:hover { border-color: #B4532A; }
.pb-about.open .pb-clamp { display: block; -webkit-line-clamp: unset; overflow: visible; }   /* About opened with "more" */
.pb-about .pb-qmore { margin-top: 4px; }

/* heart thank-you: a little room between "Thank you, name!" and the line under it (Khushi, Nov 2) */
.f3-rcard h3 { margin-bottom: 12px; text-align: center; }   /* centered (Khushi, Nov 2) */

/* heart thank-you, look A: centered, the place in bold, the second line softer (Khushi, Nov 2) */
.f3-rthx { text-align: center; }
.f3-rthx .f3-dsub b { color: #1F4535; font-weight: 600; }
.f3-rthx .f3-dsoft { color: #6E7468; }

/* "Tap ♡ to recommend a place, or 🔖 to save it to My Family Finds." under the place count (Sheetal, Nov 5) */
.f3-tip { margin: 6px 0 0; font: 400 14px/1.45 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #6A665E; }
.f3-tipic { display: inline-block; vertical-align: -3px; margin: 0 1px; }
.f3-tipic svg { width: 16px; height: 16px; fill: none; stroke: #1F4535; stroke-width: 1.8; }
@media (max-width: 700px) { .f3-tip { font-size: 13px; } }

/* Big screens only (wider than 1560px): Find uses more of the screen, 4 places per row. Laptops and phones unchanged (Sheetal, Nov 6). */
@media (min-width: 1560px) {
  .f3-wrap { max-width: 1488px; }   /* 1440px of content inside its 24px sides, matching the header */
  .f3-wrap .f3-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}