.fbft{
  --line:rgba(255,255,255,.10); --text:#FFFFFF; --muted:#94A2C9;
  --freen:#5AA0C7; --becky:#FF6FB1; --violet:#A97AFF;
  --freen-hi:#7FD8FF; --becky-hi:#FF8FC4; --violet-hi:#C39BFF;
  --duo:linear-gradient(90deg,var(--freen) 0%,var(--becky) 100%);
  --max:1300px; --gutter:clamp(20px,5vw,48px);
  --display:"Playfair Display",Georgia,serif;
  --ui:"Jost",system-ui,sans-serif;
  background:transparent; color:var(--text); max-width:100%; overflow-x:clip;
  font-family:var(--ui); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.fbft *{box-sizing:border-box;}
.fbft :where(p,h2,ul,li){margin:0;padding:0;list-style:none;}
.fbft a{color:inherit;text-decoration:none;}
.fbft-in{max-width:var(--max);margin-inline:auto;padding:clamp(34px,4.5vw,56px) var(--gutter) clamp(24px,3vw,34px);}

.fbft-grid{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:clamp(22px,3vw,40px);}
.fbft-logo{display:inline-block;flex:0 0 auto;}
.fbft-logo img{width:clamp(84px,7vw,110px);height:auto;display:block;}
.fbft-tag{font-size:14px;color:#FFFFFF;margin-top:16px;max-width:34ch;}
.fbft.fbft .fbft-tag{color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important}
.fbft.fbft .fbft-tag b{white-space:nowrap}
.fbft.fbft .fbft-tag{text-wrap:pretty}
.fbft-tag b{color:var(--text);font-weight:500;}

.fbft-h{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.2;margin-bottom:14px;color:var(--text);}
.fbft-h.is-freen{color:var(--freen);}
.fbft-h.is-becky{color:var(--becky);}
.fbft-h.is-duo{background-image:var(--duo);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.fbft-col li+li{margin-top:9px;}
.fbft-col a{font-size:14px;color:var(--text);transition:color .2s;display:inline-block;}
.fbft-col a:hover{color:var(--violet-hi);}
.fbft-col:nth-of-type(1) a:hover{color:var(--freen-hi);}
.fbft-col:nth-of-type(2) a:hover{color:var(--becky-hi);}
.fbft-col:nth-of-type(3) a:hover{color:var(--violet-hi);}
.fbft-col:nth-of-type(4) a:hover{color:var(--freen-hi);}

/* search */
.fbft .fbft-search{display:block;width:100%;margin:0;padding:0;position:relative}
.fbft .fbft-sl{display:block;margin:0 0 10px;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(90deg,#5AA0C7,#A97AFF,#FF6FB1);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.fbft .fbft-sr{display:flex;align-items:stretch;width:100%;border:2px solid transparent;border-radius:99px;background:linear-gradient(#0B1533,#0B1533) padding-box,linear-gradient(90deg,#5AA0C7,#A97AFF,#FF6FB1) border-box;box-shadow:0 0 0 0 rgba(169,122,255,0);transition:box-shadow .25s}
.fbft .fbft-sr:focus-within{box-shadow:0 0 0 4px rgba(169,122,255,.18),0 10px 30px rgba(169,122,255,.18)}
.fbft .fbft-si{flex:1 1 auto;min-width:0;margin:0;border:0;outline:0;background:transparent;box-shadow:none;border-radius:99px 0 0 99px;padding:15px 6px 15px 22px;font-family:var(--ui);font-size:16px;line-height:1.2;color:#E4D7FF;-webkit-text-fill-color:#E4D7FF;caret-color:#E4D7FF}
.fbft .fbft-si::placeholder{color:rgba(228,215,255,.55);-webkit-text-fill-color:rgba(228,215,255,.55);opacity:1}
.fbft .fbft-si::-webkit-search-cancel-button{-webkit-appearance:none}
.fbft .fbft-sb{flex:0 0 54px;display:grid;place-items:center;margin:0;padding:0;border:0;border-radius:0 99px 99px 0;background:transparent;color:#fff;-webkit-text-fill-color:#fff;cursor:pointer;box-shadow:none;min-height:0}
.fbft .fbft-sb svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.fbft .fbft-sb:hover svg{stroke:#E4D7FF}
.fbft .fbft-sb:focus-visible{outline:2px solid #A97AFF;outline-offset:2px}

/* search toggle: the bar stays hidden until the pill is tapped */
.fbft .fbft-stog{display:inline-flex;align-items:center;gap:10px;margin:0;padding:11px 20px;border:1.5px solid transparent;border-radius:99px;background:linear-gradient(#0B1533,#0B1533) padding-box,linear-gradient(90deg,#5AA0C7,#A97AFF,#FF6FB1) border-box;font-family:var(--ui);font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;color:#fff;-webkit-text-fill-color:#fff;cursor:pointer;box-shadow:none;min-height:0;transition:background .2s,color .2s}
.fbft .fbft-stog svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;flex:none}
.fbft .fbft-stog i{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.fbft .fbft-stog[aria-expanded="true"] i{transform:translateY(2px) rotate(-135deg)}
.fbft .fbft-stog:hover,.fbft .fbft-stog[aria-expanded="true"]{background:linear-gradient(90deg,#5AA0C7,#A97AFF,#FF6FB1) border-box;color:#070E24;-webkit-text-fill-color:#070E24}
.fbft .fbft-stog:focus-visible{outline:2px solid #A97AFF;outline-offset:3px}
.fbft .fbft-sbody{margin-top:12px}
.fbft .fbft-sbody[hidden]{display:none}
.fbft .fbft-sbody .fbft-sl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}

/* live results */
.fbft .fbft-res{position:absolute;left:0;right:0;top:auto;bottom:calc(100% + 8px);z-index:60;max-height:min(60vh,420px);overflow-y:auto;background:#0B1533;border:1px solid rgba(255,255,255,.16);border-radius:14px;box-shadow:0 -18px 44px rgba(0,0,0,.45);padding:6px}
.fbft .fbft-res[hidden]{display:none}
.fbft .fbft-res a{display:block;padding:10px 12px;border-radius:10px;color:var(--text);line-height:1.35}
.fbft .fbft-res a:hover,.fbft .fbft-res a.is-on{background:rgba(255,255,255,.07)}
.fbft .fbft-res b{display:block;font-weight:500;font-size:15px}
.fbft .fbft-res small{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.fbft .fbft-res p{padding:12px;font-size:14px;color:var(--muted)}

.fbft-foot{margin-top:clamp(28px,3.5vw,42px);padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;}
.fbft-sites{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;}
.fbft-sites a{font-size:13px;letter-spacing:.04em;color:var(--text);transition:color .2s;}
.fbft-sites a:hover{color:var(--violet-hi);}

/* rate this site */
.fbft .fbft-rt{position:relative;}
.fbft .fbft-rt summary{display:inline-flex;align-items:center;gap:8px;list-style:none;cursor:pointer;padding:6px 14px;border:1.5px solid transparent;border-radius:99px;background:linear-gradient(#070E24,#070E24) padding-box,linear-gradient(90deg,#5AA0C7,#A97AFF,#FF6FB1) border-box;font-size:13px;font-weight:600;letter-spacing:.04em;color:#fff;-webkit-text-fill-color:#fff;}
.fbft .fbft-rt summary::-webkit-details-marker{display:none;}
.fbft .fbft-rt summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(1px) rotate(-135deg);transition:transform .2s;}
.fbft .fbft-rt[open] summary::after{transform:translateY(-2px) rotate(45deg);}
.fbft .fbft-rt summary:hover,.fbft .fbft-rt[open] summary{background:linear-gradient(90deg,#5AA0C7,#A97AFF,#FF6FB1) border-box;color:#070E24;-webkit-text-fill-color:#070E24;}
.fbft .fbft-rt summary:focus-visible{outline:2px solid #A97AFF;outline-offset:3px;}
.fbft .fbft-rt-menu{position:absolute;left:0;bottom:calc(100% + 10px);z-index:60;display:flex;flex-direction:column;gap:4px;min-width:230px;padding:6px;background:#0B1533;border:1px solid rgba(255,255,255,.16);border-radius:14px;box-shadow:0 -18px 44px rgba(0,0,0,.45);}
.fbft .fbft-rt-menu a{display:block;padding:10px 14px;border-radius:10px;font-size:15px;font-weight:500;letter-spacing:0;color:#fff;white-space:nowrap;}
.fbft .fbft-rt-menu a:hover,.fbft .fbft-rt-menu a:focus-visible{background:rgba(255,255,255,.08);color:var(--violet-hi);outline:0;}

.fbft-credit{font-size:12px;color:var(--muted);}
.fbft-credit a{color:var(--text);font-weight:600;border-bottom:1px solid rgba(255,255,255,.35);transition:color .2s,border-color .2s;}
.fbft-credit a:hover{color:var(--violet-hi);border-color:var(--violet-hi);}


/* footer hover colors, locked so no theme or page rule can override them:
   Freen = blue · Becky = light pink · FreenBecky = lilac · everything else = the blue-lilac-pink brand gradient */
.fbft.fbft .fbft-col a,.fbft.fbft .fbft-sites a,.fbft.fbft .fbft-credit a,.fbft.fbft .fbft-res a,.fbft.fbft .fbft-rt-menu a{color:#fff!important;-webkit-text-fill-color:#fff!important;text-decoration:none!important}
.fbft.fbft .fbft-col:nth-of-type(1) a:hover,.fbft.fbft .fbft-col:nth-of-type(1) a:focus-visible{color:#7FD8FF!important;-webkit-text-fill-color:#7FD8FF!important}
.fbft.fbft .fbft-col:nth-of-type(2) a:hover,.fbft.fbft .fbft-col:nth-of-type(2) a:focus-visible{color:#FFB3D6!important;-webkit-text-fill-color:#FFB3D6!important}
.fbft.fbft .fbft-col:nth-of-type(3) a:hover,.fbft.fbft .fbft-col:nth-of-type(3) a:focus-visible{color:#D2B8FF!important;-webkit-text-fill-color:#D2B8FF!important}
.fbft.fbft .fbft-col:nth-of-type(4) a:hover,.fbft.fbft .fbft-col:nth-of-type(4) a:focus-visible,.fbft.fbft .fbft-sites a:hover,.fbft.fbft .fbft-sites a:focus-visible,.fbft.fbft .fbft-credit a:hover,.fbft.fbft .fbft-rt-menu a:hover,.fbft.fbft .fbft-rt-menu a:focus-visible{background-image:linear-gradient(90deg,#7FD8FF 0%,#D2B8FF 50%,#FFB3D6 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
.fbft.fbft .fbft-credit a:hover{border-color:#D2B8FF!important}
.fbft.fbft .fbft-rt-menu a:hover,.fbft.fbft .fbft-rt-menu a:focus-visible{background-color:rgba(255,255,255,.08)!important}
.fbft.fbft .fbft-res a:hover,.fbft.fbft .fbft-res a.is-on,.fbft.fbft .fbft-res a:hover b,.fbft.fbft .fbft-res a.is-on b{color:#fff!important;-webkit-text-fill-color:#fff!important}
.fbft.fbft .fbft-res small{color:#94A2C9!important;-webkit-text-fill-color:#94A2C9!important}

/* official hashtags under the tagline: person colors, brighten on hover */
.fbft.fbft .fbft-tags{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:10px}
.fbft.fbft .fbft-tags a{font-size:14px;font-weight:600;text-decoration:none!important;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.fbft.fbft .fbft-tags a.is-freen{color:#5AA0C7!important;-webkit-text-fill-color:#5AA0C7!important}
.fbft.fbft .fbft-tags a.is-becky{color:#FF6FB1!important;-webkit-text-fill-color:#FF6FB1!important}
.fbft.fbft .fbft-tags a.is-duo{color:#C39BFF!important;-webkit-text-fill-color:#C39BFF!important}
.fbft.fbft .fbft-tags a.is-freen:hover{color:#7FD8FF!important;-webkit-text-fill-color:#7FD8FF!important;border-color:#7FD8FF}
.fbft.fbft .fbft-tags a.is-becky:hover{color:#FFB3D6!important;-webkit-text-fill-color:#FFB3D6!important;border-color:#FFB3D6}
.fbft.fbft .fbft-tags a.is-duo:hover{color:#D2B8FF!important;-webkit-text-fill-color:#D2B8FF!important;border-color:#D2B8FF}

/* ═══════ RESPONSIVE ═══════ */
@media (min-width:2400px){ .fbft{font-size:17px;} }
@media (max-width:1366px){ .fbft{--gutter:clamp(20px,4.5vw,44px);} }
@media (max-width:1024px){
  .fbft-grid{grid-template-columns:repeat(2,1fr);gap:26px 24px;}
  .fbft-brand{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;}
  .fbft-tag{margin-top:0;max-width:52ch;flex:1 1 280px;}
}
@media (max-width:880px){ .fbft-foot{flex-direction:column;align-items:flex-start;} }

/* PHONES: compact. Logo beside the tagline, search right under it, links in a 2 x 2 grid */
@media (max-width:767px){
  .fbft{--gutter:20px;}
  .fbft-in{padding:28px var(--gutter) 22px;}
  .fbft-grid{grid-template-columns:1fr 1fr;gap:22px 16px;}
  .fbft-brand{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:14px;}
  .fbft-logo img{width:56px;}
  .fbft-tag{flex:1 1 auto;font-size:13px;line-height:1.5;}
  .fbft .fbft-search{grid-column:1 / -1;order:-1;grid-row:2;}
  .fbft .fbft-sl{display:none;}
  .fbft .fbft-si{padding:12px 6px 12px 18px;}
  .fbft .fbft-sb{flex-basis:48px;}
  .fbft-h{font-size:15px;margin-bottom:8px;}
  .fbft-col li+li{margin-top:4px;}
  .fbft-col a{font-size:14px;line-height:1.45;padding:3px 0;}
  .fbft .fbft-col:nth-of-type(3),.fbft .fbft-col:nth-of-type(4){grid-column:1 / -1;}
  .fbft .fbft-col:nth-of-type(3) ul{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;}
  .fbft .fbft-col:nth-of-type(4){padding-top:16px;border-top:1px solid var(--line);}
  .fbft .fbft-col:nth-of-type(4) ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 12px;}
  .fbft .fbft-col:nth-of-type(3) li+li,.fbft .fbft-col:nth-of-type(4) li+li{margin-top:0;}
  .fbft-foot{margin-top:22px;padding-top:16px;gap:12px;}
  .fbft-sites{gap:6px 16px;}
  .fbft-credit{font-size:12px;}
}

/* search placement on tablet and desktop */
/* TABLETS (portrait and landscape): logo + tagline, search, Freen | Becky | FreenBecky in one row, Explore spread across underneath */
@media (min-width:768px) and (max-width:1024px){
  .fbft-in{padding-top:40px;}
  .fbft-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 24px;}
  .fbft .fbft-col:nth-of-type(4){grid-column:1 / -1;padding-top:18px;border-top:1px solid var(--line);}
  .fbft .fbft-col:nth-of-type(4) ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px 18px;}
  .fbft .fbft-col:nth-of-type(4) li+li{margin-top:0;}
  .fbft-brand{grid-column:1 / -1;flex-wrap:nowrap;gap:20px;}
  .fbft-logo img{width:76px;}
  .fbft-tag{flex:1 1 auto;max-width:60ch;}
  .fbft .fbft-search{grid-column:1 / -1;grid-row:2;max-width:none;margin-bottom:6px}
  .fbft .fbft-sl{margin-bottom:8px}
  .fbft-col li+li{margin-top:7px;}
  .fbft-foot{flex-direction:row;align-items:center;}
}
/* DESKTOP: logo, tagline + search on the left | Freen | Becky | FreenBecky on top | Explore across underneath */
@media (min-width:1025px){
  .fbft-grid{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:26px clamp(18px,2.4vw,44px);}
  .fbft .fbft-brand{grid-column:1;grid-row:1 / span 2}
  .fbft .fbft-col:nth-of-type(1){grid-column:2;grid-row:1}
  .fbft .fbft-col:nth-of-type(2){grid-column:3;grid-row:1}
  .fbft .fbft-col:nth-of-type(3){grid-column:4;grid-row:1}
  .fbft .fbft-search{grid-column:1;grid-row:3;align-self:start;max-width:340px;margin-top:-8px}
  .fbft .fbft-col:nth-of-type(4){grid-column:2 / 5;grid-row:2;padding-top:22px;border-top:1px solid var(--line)}
  .fbft .fbft-col:nth-of-type(4) ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px 24px}
  .fbft .fbft-col:nth-of-type(4) li+li{margin-top:0}
  .fbft .fbft-stog{padding:9px 16px;font-size:15px;letter-spacing:.02em;text-transform:none;font-weight:500}
  .fbft .fbft-sbody{margin-top:10px}
  .fbft .fbft-si{padding:12px 4px 12px 16px;font-size:15px}
  .fbft .fbft-sb{flex-basis:44px}
  .fbft .fbft-res{top:calc(100% + 8px);bottom:auto;left:0;right:auto;width:min(420px,90vw);box-shadow:0 18px 44px rgba(0,0,0,.45)}
}
@media (min-width:2400px){ .fbft .fbft-si{font-size:19px;padding:18px 8px 18px 26px} .fbft .fbft-sb{flex-basis:62px} .fbft .fbft-sb svg{width:26px;height:26px} }
@media (prefers-reduced-motion:reduce){ .fbft a{transition:none;} .fbft .fbft-rt summary::after{transition:none;} }