/* Websites for Heroes - shared Heroes look (header, footer, buttons, 24-hour badge, page morphs).
   Used by the homepage, the Get your website flow and the Why page. Colours come from the
   tf-skin-hero-light / tf-skin-hero-dark tokens in tft-engine.css. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

.tfx{color:var(--tf-ink);background-color:var(--tf-bg);font-family:Manrope,system-ui,sans-serif}
.tfx-hero-light{background-image:radial-gradient(rgba(17,17,17,.07) 1.2px,transparent 1.8px);background-size:10px 10px;--x-shadow:#FFC400;--x-wm:#111;--x-line:#111;--x-box:#111}
.tfx-hero-dark{background-image:radial-gradient(rgba(255,196,0,.13) 1.2px,transparent 1.8px);background-size:10px 10px;--x-shadow:#000;--x-wm:#FFC400;--x-line:#fff;--x-box:#000}
.tfx a{color:inherit}
.tfx [hidden]{display:none !important}
.tfx-w{max-width:1280px;width:100%;margin:0 auto;padding:0 32px;box-sizing:border-box}

/* header */
.tfx-bfbar{background:#E3262E;color:#fff;border-bottom:3px solid #111;position:relative;z-index:31}
.tfx-hero-dark .tfx-bfbar{border-bottom-color:#FFC400}
.tfx-bfbar[hidden]{display:none}
.tfx-bfbar p{margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;padding-top:10px;padding-bottom:10px;text-align:center;font-size:16px;font-weight:800;line-height:1.3}
.tfx-bfbar b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:22px;letter-spacing:.06em;text-transform:uppercase;background:#111;color:#FFC400;padding:2px 10px;transform:rotate(-2deg)}
.tfx-bfbar a{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;white-space:nowrap}
@media (max-width:760px){.tfx-bfbar p{font-size:14px;gap:4px 10px;padding-top:8px;padding-bottom:8px}.tfx-bfbar b{font-size:18px}}
.tfx-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:22px;position:relative;z-index:30}
.tfx-wm{font-family:Anton,Impact,sans-serif;font-size:30px;letter-spacing:.02em;color:var(--x-wm) !important;text-decoration:none;white-space:nowrap}
.tfx-hero-light .tfx-wm{text-shadow:3px 3px 0 #FFC400}
.tfx-hero-dark .tfx-wm{text-shadow:3px 3px 0 #000}
.tfx-nav{display:flex;flex-wrap:wrap;gap:28px;font-size:15px;font-weight:700}
.tfx-nav a{text-decoration:none}
.tfx-nav a:hover{text-decoration:underline;text-decoration-color:#FFC400;text-decoration-thickness:3px;text-underline-offset:6px}
.tfx-nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:#FFC400;text-decoration-thickness:3px;text-underline-offset:6px}
.tfx-actions{display:flex;align-items:center;gap:10px}
.tfx-ghost{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--tf-line);background:transparent;color:var(--tf-ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.tfx-hero-light .tfx-ghost{border-color:#111}
.tfx-phone{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:#FFC400;color:#111 !important;font-weight:800;text-decoration:none;white-space:nowrap}
.tfx-hero-light .tfx-phone{background:#111;color:#FFC400 !important}
.tfx-menu{display:none;position:relative}
.tfx-menu summary{list-style:none;min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;border:2px solid var(--x-line);display:flex;align-items:center;gap:8px;font-weight:800;cursor:pointer}
.tfx-menu summary::-webkit-details-marker{display:none}
.tfx-menu[open] summary{background:#FFC400;color:#111;border-color:#111}
.tfx-menu nav{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;display:flex;flex-direction:column;padding:8px;border-radius:14px;border:3px solid var(--x-line);background:var(--tf-surface);box-shadow:5px 5px 0 var(--x-box)}
.tfx-menu nav a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:10px;font-weight:800;text-decoration:none}
.tfx-menu nav a:hover,.tfx-menu nav a:focus-visible{background:#FFC400;color:#111}

/* shared bits */
.tfx-kicker{margin:0;font-size:13px;font-weight:800;letter-spacing:.32em;color:#FFC400;text-transform:uppercase}
.tfx-hero-light .tfx-kicker{color:#111}
.tfx-hero-light .tfx-kicker span{background:#FFC400;padding:4px 10px}
.tfx-h{margin:0;font-family:Anton,Impact,sans-serif;font-weight:400;letter-spacing:.01em;text-transform:uppercase;text-shadow:5px 5px 0 var(--x-shadow);line-height:1}
.tfx-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;background:#FFC400;color:#111 !important;font:inherit;font-size:16px;font-weight:800;text-decoration:none;border:2px solid #111;box-shadow:4px 4px 0 var(--x-box);cursor:pointer;text-align:center}
.tfx-hero-dark .tfx-cta{border-color:#000}
.tfx-cta:disabled{opacity:.55;cursor:not-allowed}
.tfx-link{background:none;border:0;padding:0;font:inherit;font-weight:800;color:var(--tf-ink);text-decoration:underline;text-decoration-color:#FFC400;text-decoration-thickness:3px;text-underline-offset:5px;cursor:pointer}
.tfx a:focus-visible,.tfx button:focus-visible,.tfx input:focus-visible,.tfx select:focus-visible,.tfx textarea:focus-visible,.tfx summary:focus-visible,.tfx label:focus-within{outline:4px solid #FFC400;outline-offset:3px}
.tfx-hero-light a:focus-visible,.tfx-hero-light button:focus-visible,.tfx-hero-light input:focus-visible,.tfx-hero-light select:focus-visible,.tfx-hero-light textarea:focus-visible,.tfx-hero-light summary:focus-visible{outline-color:#111}

/* 24-hour badge */
.tfx-24{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:12px;background:#111;color:#FFC400;border:3px solid #FFC400;font-weight:800;font-size:15px;letter-spacing:.02em;line-height:1.15;transform:rotate(-2deg);box-shadow:4px 4px 0 rgba(0,0,0,.35);text-align:left}
.tfx-24 b{display:block;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:22px;letter-spacing:.04em;text-transform:uppercase;color:#FFC400}
.tfx-24 span{display:block;font-size:13px;color:#fff;font-weight:700}
.tfx-24 svg{flex:0 0 auto}
.tfx-24.is-flat{transform:none}
.tfx-bf{background:#E3262E;color:#fff;border-color:#111;transform:rotate(2deg);box-shadow:4px 4px 0 rgba(0,0,0,.35),0 0 22px rgba(227,38,46,.35)}
.tfx-bf b,.tfx-bf span{color:#fff}
.tfx-hero-dark .tfx-bf{border-color:#fff;box-shadow:4px 4px 0 #000,0 0 22px rgba(227,38,46,.45)}

.tc-prev{align-self:flex-start;margin-top:6px;font-size:14px;font-weight:800;color:var(--tf-ink);text-decoration:underline;text-decoration-color:#FFC400;text-decoration-thickness:3px;text-underline-offset:4px}

/* footer */
.tfx-foot{margin-top:auto;background:#111;color:#fff}
.tfx-hero-dark .tfx-foot{background:#000;border-top:1px solid rgba(255,255,255,.12)}
.tfx-foot-in{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:24px;padding-top:36px;padding-bottom:36px}
.tfx-wm-img{display:block;line-height:0;text-shadow:none !important}
.tfx-wm-img img{display:block;height:104px;width:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.18))}
.tfx-hero-dark .tfx-wm-img img{filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.tfx-foot .tfx-wm{color:#FFC400 !important;font-size:26px;text-shadow:none}
.tfx-foot .tfx-foot-logo img{height:124px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.tfx-foot p{margin:14px 0 0;font-size:14px;color:#D9DCE0;max-width:320px;line-height:1.5}
.tfx-foot nav{display:flex;flex-direction:column;gap:10px;font-size:15px;font-weight:700}
.tfx-foot nav a{text-decoration:none;color:#fff}
.tfx-foot nav a:hover{text-decoration:underline;text-decoration-color:#FFC400}
.tfx-foot-cols{display:flex;flex-wrap:wrap;gap:48px}
.tfx-foot h2{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.16em;color:#FFC400;text-transform:uppercase}

@media (max-width:900px){
  .tfx-nav{display:none}
  .tfx-menu{display:block}
}
@media (max-width:760px){
  .tfx-w{padding:0 16px}
  .tfx-wm{font-size:22px}
  .tfx-wm-img img{height:72px}
  .tfx-head{padding-top:14px;padding-bottom:14px;gap:10px}
  .tfx-ghost{display:none}
  .tfx-phone{padding:0 14px;font-size:14px}
  .tfx-24{font-size:13px;padding:8px 12px 8px 10px}
  .tfx-24 b{font-size:18px}
  .tfx-foot-cols{gap:28px}
}
@media (max-width:400px){.tfx-phone{display:none}}
@media (orientation:landscape) and (max-height:520px){
  .tfx-head{padding-top:8px;padding-bottom:8px}
  .tfx-wm-img img{height:52px}
  .tfx-ghost{display:none}
  .tfx-wm{font-size:22px}
}

@media (max-width:760px){.tfx-foot .tfx-foot-logo img{height:96px}}

/* footer: websites by trade (links to every trade page, which also helps search engines find them) */
.tfx-foot-trades{border-top:1px solid rgba(255,255,255,.14);padding-top:24px;padding-bottom:30px}
.tfx-foot-trades h2{margin-bottom:14px}
.tfx-foot-trades ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 28px}
.tfx-foot-trades li{margin:0;min-width:0}
.tfx-foot-trades a{color:#D9DCE0;text-decoration:none;font-size:14px;font-weight:600;line-height:1.4}
.tfx-foot-trades a:hover{color:#fff;text-decoration:underline;text-decoration-color:#FFC400}
@media (max-width:760px){.tfx-foot-trades ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}.tfx-foot-trades a{font-size:13px}}