/* 4-Sure Go! inside the website (Richard, 30 Sep 2026: "a web version of Go! so
   it stays in the 4-Sure website and looks great"). Loaded after Tailwind and
   classic.css, only when Go! wears 4-Sure's own brand (go/_base.html). */
body.go-web { background: #fff; font-weight: 400; color: #1f1f1f; }
.go-web main { flex: 1 0 auto; }
.go-web main h1, .go-web main h2, .go-web main h3, .go-web main h4 { padding-bottom: 0; line-height: inherit; }
.go-web main p + p { margin-top: 0; }

/* The Go! bar: the product's own navigation, under the site's top bar. */
.go-appbar { border-bottom: 1px solid #e6e6e6; background: #fff; }
.go-appbar-in { width: 1080px; max-width: 90%; margin: 0 auto; display: flex; align-items: center; gap: 28px; min-height: 64px; }
.go-mark { font-size: 22px; font-weight: 600; letter-spacing: -.3px; color: #000; white-space: nowrap; }
.go-mark b { color: var(--g); font-weight: 600; }
.go-nav { display: flex; gap: 22px; margin-left: auto; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.go-nav::-webkit-scrollbar { display: none; }
.go-nav a { font-size: 14px; font-weight: 400; color: #333; white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent; }
.go-nav a:hover, .go-nav a.on { color: var(--g); border-bottom-color: var(--g); }
.go-nav a.go-cta { color: #fff; background: var(--g); border-radius: 100px; padding: 6px 16px; border: 0; font-weight: 500; }
.go-nav a.go-cta:hover { background: #000; color: #fff; }

/* Page width: a readable column by default; a page with a real desktop layout
   asks for the full 1080 (block page_width). */
.go-page { width: 760px; max-width: 90%; margin: 0 auto; padding: 44px 0 72px; }
.go-page.wide { width: 1080px; }

@media (max-width: 980px) {
  .go-appbar-in { width: auto; max-width: none; margin: 0 16px; gap: 16px; min-height: 56px; }
  .go-mark { font-size: 19px; }
  .go-nav { gap: 16px; }
  .go-page, .go-page.wide { width: auto; max-width: none; margin: 0 16px; padding: 24px 0 48px; }
}

/* ── The Go! screens in the website's own look ─────────────────────────────
   The Go! templates are shared with the retailer- and SP-branded frame, so the
   website look is layered on here, under .go-web only — never in the markup's
   Tailwind classes. Page-specific desktop layouts live in each template's
   head_extra, also scoped to .go-web. */
.go-web .go-page { font-size: 16px; line-height: 1.55; }
.go-web .go-page h1, .go-web .go-page h1.text-xl { font-size: 40px; font-weight: 600; letter-spacing: -1px; line-height: 1.1; margin-bottom: 10px; }
.go-web .go-page h2 { font-size: 26px; font-weight: 600; letter-spacing: -.5px; line-height: 1.2; }
.go-web .go-page .text-xs { font-size: 13px; }
.go-web .go-page .text-sm { font-size: 15px; }
.go-web .go-page .text-base { font-size: 17px; }
.go-web .go-page .text-lg { font-size: 19px; }
.go-web .go-page .text-xl { font-size: 24px; }
/* Cards: the website's soft card — white, 16px corners, a quiet shadow. */
.go-web .go-page .rounded-2xl { border-radius: 16px; }
.go-web .go-page .shadow-sm { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
/* Primary buttons: the website's green pill, black on hover. */
.go-web .go-page .bg-emerald-600, .go-web .go-page .bg-brand-600 {
  background: var(--g); border-radius: 100px; font-weight: 500; transition: background .2s, letter-spacing .2s; }
.go-web .go-page .bg-emerald-600:hover, .go-web .go-page .bg-brand-600:hover,
.go-web .go-page .hover\:bg-emerald-700:hover, .go-web .go-page .hover\:bg-brand-700:hover { background: #000; }
.go-web .go-page .text-emerald-600, .go-web .go-page .text-brand-700 { color: #1f9e55; }
/* Inputs: taller, calmer, green focus. */
.go-web .go-page input[type=text], .go-web .go-page input[type=tel], .go-web .go-page input[type=email],
.go-web .go-page input[type=number], .go-web .go-page select, .go-web .go-page textarea {
  border-color: #d6d6d6; border-radius: 12px; font-size: 16px; padding-top: 12px; padding-bottom: 12px; }
.go-web .go-page input:focus, .go-web .go-page select:focus, .go-web .go-page textarea:focus {
  outline: none; border-color: var(--g); box-shadow: 0 0 0 3px rgba(46,204,113,.18); }
/* Page intro: the back link sits quietly above a real page title. */
.go-web .go-page > a.underline:first-child, .go-web .go-page a[href$="/hub/"].underline { font-size: 14px; color: #666; }

/* Go!'s own top bar (1 Oct 2026): the website's bar with the 4-Sure logo and a green Go! */
.go-topbar .go-logo { display: inline-flex; align-items: center; gap: 6px; }
.go-topbar .go-logo span { font-size: 21px; font-weight: 700; letter-spacing: -.3px; color: var(--g); line-height: 1; }
.go-topbar .topbar-nav { gap: 26px; }
.go-topbar .go-letsgo { border-color: var(--g); background: var(--g); color: #fff; }
.go-topbar .go-letsgo:hover { background: #000; border-color: #000; color: #fff; }
@media (max-width: 980px) { .go-topbar .go-letsgo { display: none; } }
/* No footer now (1 Oct 2026): the page's grey runs to the bottom of the window. */
body.go-web { background: #f8f8f8; }
/* The bar's contents sit in the page's own column (1080px / 90%; 16px gutters
   on a phone), so the 4-Sure logo lines up with the page's left edge. */
.go-topbar .topbar-main { padding: 0; }
.go-topbar .go-topbar-in { width: 1080px; max-width: 90%; margin: 0 auto; height: 100%; display: flex; align-items: center; }
@media (max-width: 980px) { .go-topbar .go-topbar-in { width: auto; max-width: none; margin: 0 16px; } }