/* ============================================
   GRANADO TECHNOLOGIES - HELP CENTER BRAND CSS
   Brand: Black + Primary Green #006633 + White
   Typography: Open Sans
   ============================================ */

/* Import Open Sans */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');

:root {
    --gt-green: #006633;
    --gt-green-hover: #008844;
    --gt-green-light: rgba(0, 102, 51, 0.08);
    --gt-black: #000000;
    --gt-dark: #0a0a0a;
    --gt-charcoal: #1a1a1a;
    --gt-white: #FFFFFF;
    --gt-gray-100: #F5F7F8;
    --gt-gray-200: #E5E7EB;
    --gt-gray-500: #6B7280;
    --gt-gray-700: #374151;
    --gt-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --gt-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
}

/* ===== GLOBAL TYPOGRAPHY ===== */
body, .Body__bodyContainer, .Body__bodyContent {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: var(--gt-charcoal);
    background: #FAFBFC;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700;
    color: var(--gt-black);
    letter-spacing: -0.01em;
}

/* ===== HEADER: BOLD BLACK WITH GREEN ACCENTS ===== */
.Header__header,
#headerContainer {
    background: linear-gradient(135deg, #000000 0%, #0a0a0a 60%, #001a0d 100%) !important;
    background-image:
          radial-gradient(circle at 20% 30%, rgba(0,102,51,0.15) 0%, transparent 50%),
          radial-gradient(circle at 80% 70%, rgba(0,102,51,0.10) 0%, transparent 50%),
          linear-gradient(135deg, #000000 0%, #0a0a0a 100%) !important;
    border-bottom: 2px solid var(--gt-green);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
    padding: 8px 0;
}

.Header__headerContainer {
    background: transparent !important;
}

.Header__headerRow, #headerRow {
    padding: 16px 24px;
}

/* Brand / Logo Area */
.Header__brand, .Header__brandFlexible {
    align-items: center;
}

.Header__brandLogo img,
.Header__brandLogoImg {
    max-height: 48px;
    filter: brightness(1.1);
}

.Header__brandName {
    color: var(--gt-white) !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.02em;
    margin-left: 12px;
}

.Header__brandName span {
    color: var(--gt-green) !important;
}

/* Search Bar */
.Header__headerSearch, #searchContainer {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
}

.Header__headerSearch:hover, #searchContainer:hover,
.Header__headerSearch:focus-within, #searchContainer:focus-within {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: var(--gt-green) !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 51, 0.25);
}

.Header__headerSearch input,
#searchContainer input {
    color: var(--gt-white) !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px;
}

.Header__headerSearch input::placeholder,
#searchContainer input::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}

.Header__headerSearch svg,
#searchContainer svg {
    fill: var(--gt-green) !important;
    color: var(--gt-green) !important;
}

/* Sign In / Sign Up Buttons */
.Header__signInSignUp a,
.Header__signInSignUp button {
    color: var(--gt-white) !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.Header__signInSignUp a:hover {
    background: var(--gt-green) !important;
    color: var(--gt-white) !important;
}

/* Language Selector */
.Header__userPreference,
.Header__userPreference * {
    color: var(--gt-white) !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600;
}

/* ===== TAB NAVIGATION ===== */
.Header__headerNav {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 4px;
}

.Header__tabsList, #tabList {
    gap: 8px;
}

.Header__tabsList li,
#tabList li {
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 14px 20px !important;
    border-bottom: 3px solid transparent !important;
    transition: all 0.25s ease;
    cursor: pointer;
}

.Header__tabsList li:hover,
#tabList li:hover {
    color: var(--gt-white) !important;
    border-bottom-color: rgba(0, 102, 51, 0.5) !important;
}

.Header__tabsList li.active,
.Header__tabsList li.Header__active,
#tabList li.active {
    color: var(--gt-white) !important;
    border-bottom-color: var(--gt-green) !important;
    background: rgba(0, 102, 51, 0.08);
}

/* ===== BODY / CONTENT AREA ===== */
.Body__bodyContent {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px;
}

/* Cards & Containers */
.Card, .card, .Body__card, .Solutions__card, .KB__card {
    background: var(--gt-white) !important;
    border: 1px solid var(--gt-gray-200) !important;
    border-radius: 12px !important;
    box-shadow: var(--gt-shadow);
    transition: all 0.25s ease;
}

.Card:hover, .card:hover, .Body__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--gt-shadow-lg);
    border-color: var(--gt-green) !important;
}

/* ===== LINKS ===== */
a {
    color: var(--gt-green);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--gt-green-hover);
    text-decoration: underline;
}

/* ===== BUTTONS ===== */
.btn, button.primary, .Button__primary, input[type='submit'] {
    background: var(--gt-green) !important;
    color: var(--gt-white) !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 12px 24px !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 102, 51, 0.25);
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn:hover, button.primary:hover, .Button__primary:hover {
    background: var(--gt-green-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 102, 51, 0.35);
}

.Button__secondary, button.secondary {
    background: var(--gt-white) !important;
    color: var(--gt-black) !important;
    border: 2px solid var(--gt-black) !important;
    font-weight: 700 !important;
}

.Button__secondary:hover {
    background: var(--gt-black) !important;
    color: var(--gt-white) !important;
}

/* ===== FORM INPUTS ===== */
input[type='text'], input[type='email'], input[type='password'], textarea, select {
    font-family: 'Open Sans', sans-serif !important;
    border: 1.5px solid var(--gt-gray-200) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    transition: all 0.2s ease;
}

input[type='text']:focus, input[type='email']:focus, input[type='password']:focus, textarea:focus, select:focus {
    border-color: var(--gt-green) !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 51, 0.15) !important;
    outline: none !important;
}

/* ===== LOGIN / SIGN UP PANEL ===== */
.Login__container, .Body__loginPanel {
    background: var(--gt-white);
    border-radius: 16px;
    box-shadow: var(--gt-shadow-lg);
    padding: 40px;
    border: 1px solid var(--gt-gray-200);
}

.Login__title, .Body__loginTitle {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 800;
    color: var(--gt-black);
    font-size: 24px;
    margin-bottom: 8px;
}

.Login__subtitle {
    color: var(--gt-gray-500);
    font-size: 14px;
}

/* ===== FOOTER ===== */
.Footer__footer, .Footer__footerContainer {
    background: var(--gt-black) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 32px 24px !important;
    border-top: 3px solid var(--gt-green);
    font-family: 'Open Sans', sans-serif !important;
}

.Footer__footer a {
    color: var(--gt-white) !important;
}

.Footer__footer a:hover {
    color: var(--gt-green) !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gt-gray-100); }
::-webkit-scrollbar-thumb { background: var(--gt-green); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--gt-green-hover); }

/* ===== KNOWLEDGE BASE SECTIONS ===== */
.KB__categoryTitle, .Solutions__categoryTitle {
    color: var(--gt-black) !important;
    font-weight: 700 !important;
    border-left: 4px solid var(--gt-green);
    padding-left: 12px;
}

.KB__articleCount, .Solutions__articleCount {
    background: var(--gt-green-light);
    color: var(--gt-green) !important;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
}

/* ===== UTILITY: HIGH-TECH ACCENT LINE ===== */
.Body__bodyContent::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--gt-green) 50%, transparent 100%);
    margin-bottom: 32px;
    opacity: 0.3;
}


/* ============================================
   NEW WRAPPER CLASSES FROM CUSTOM HTML
   ============================================ */

/* Remove default background image from header */
.GT__headerImg {
    display: none !important;
}

/* Main header element override */
.GT__header {
    background: linear-gradient(180deg, #000000 0%, #050505 50%, #0a0d0a 100%) !important;
    background-image:
          radial-gradient(ellipse at 15% 0%, rgba(0,102,51,0.18) 0%, transparent 45%),
          radial-gradient(ellipse at 85% 100%, rgba(0,102,51,0.12) 0%, transparent 50%),
          linear-gradient(180deg, #000000 0%, #050505 100%) !important;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
}

/* Subtle binary/grid texture overlay (high-tech feel) */
.GT__header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
          linear-gradient(rgba(0,102,51,0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(0,102,51,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    opacity: 0.6;
}

/* ===== TOP UTILITY BAR ===== */
.GT__topBar {
    background: rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(0, 102, 51, 0.25);
    position: relative;
    z-index: 2;
}

.GT__topBarInner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.GT__tagline {
    color: rgba(255, 255, 255, 0.75);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.GT__taglineIcon {
    color: var(--gt-green);
    font-size: 8px;
    animation: gt-pulse 2.5s ease-in-out infinite;
}

@keyframes gt-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

.GT__taglineText {
    color: rgba(255, 255, 255, 0.85);
}

.GT__topBarRight {
    display: flex;
    align-items: center;
    gap: 14px;
}

.GT__topBarLink {
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
    font-weight: 600 !important;
}

.GT__topBarLink:hover {
    color: var(--gt-green) !important;
}

.GT__topBarLinkIcon {
    font-size: 12px;
    color: var(--gt-green);
}

.GT__divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.2);
    display: inline-block;
}

.GT__divider--vertical {
    height: 24px;
    margin: 0 4px;
}

/* ===== MAIN HEADER CONTAINER ===== */
.GT__headerContainer {
    position: relative;
    z-index: 2;
}

.GT__headerRow {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 24px !important;
    display: flex !important;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* ===== BRAND BLOCK ===== */
.GT__headerBrand {
    flex: 0 0 auto;
}

.GT__brand {
    display: flex !important;
    align-items: center;
    gap: 14px;
    position: relative;
}

.GT__brandAccent {
    width: 3px;
    height: 42px;
    background: linear-gradient(180deg, var(--gt-green) 0%, transparent 100%);
    border-radius: 2px;
    flex-shrink: 0;
}

.GT__brandLogo a {
    display: block;
    line-height: 0;
}

.GT__brandLogoImg {
    max-height: 44px !important;
    width: auto;
    filter: brightness(1.05) contrast(1.05);
}

.GT__brandName {
    display: flex !important;
    flex-direction: column;
    line-height: 1.05;
    font-family: 'Open Sans', sans-serif !important;
}

.GT__brandNamePrimary {
    color: var(--gt-white);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.02em;
    display: inline;
}

.GT__brandNameAccent {
    color: var(--gt-green);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.02em;
    margin-left: 6px;
    display: inline;
}

.GT__brandSub {
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 4px;
    display: block;
}

/* ===== SEARCH BLOCK ===== */
.GT__headerSearch {
    flex: 1 1 400px;
    max-width: 560px;
    margin: 0 auto;
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.GT__searchLabel {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-left: 4px;
}

.GT__headerSearchInner {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 10px !important;
    padding: 4px 8px !important;
    transition: all 0.25s ease;
    backdrop-filter: blur(10px);
}

.GT__headerSearchInner:hover,
.GT__headerSearchInner:focus-within {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: var(--gt-green) !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 51, 0.20);
}

.GT__headerSearchInner input {
    color: var(--gt-white) !important;
    background: transparent !important;
    border: none !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.GT__headerSearchInner input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.GT__headerSearchInner svg {
    fill: var(--gt-green) !important;
    color: var(--gt-green) !important;
}

/* ===== USER ACTIONS ===== */
.GT__userActions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.GT__userPref,
.GT__userPref * {
    color: var(--gt-white) !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.GT__signInSignOut {
    display: flex;
    align-items: center;
    gap: 4px;
}

.GT__signInSignOut a,
.GT__signInSignOut button {
    color: var(--gt-white) !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.02em;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
    border: 1px solid transparent !important;
}

.GT__signInSignOut a:hover,
.GT__signInSignOut button:hover {
    background: var(--gt-green) !important;
    color: var(--gt-white) !important;
    border-color: var(--gt-green) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 102, 51, 0.35);
}

/* Make Sign Up a green outlined CTA to distinguish from Sign In */
.GT__signInSignOut a:last-child {
    background: var(--gt-green) !important;
    border-color: var(--gt-green) !important;
}

.GT__signInSignOut a:last-child:hover {
    background: var(--gt-green-hover) !important;
    border-color: var(--gt-green-hover) !important;
}

/* ===== TAB NAVIGATION ===== */
.GT__headerNav {
    background: rgba(0, 0, 0, 0.4) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    position: relative;
    z-index: 2;
}

.GT__tabs {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

.GT__tabsList {
    display: flex !important;
    gap: 4px !important;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

.GT__tabsTab {
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    padding: 16px 22px !important;
    border-bottom: 3px solid transparent !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.GT__tabsTab::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--gt-green);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.GT__tabsTab:hover {
    color: var(--gt-white) !important;
    background: rgba(0, 102, 51, 0.08);
}

.GT__tabsTab:hover::after {
    width: 60%;
}

.GT__tabsTab.active,
.GT__tabsTab.Header__active,
li.GT__tabsTab[class*='active'] {
    color: var(--gt-white) !important;
    background: rgba(0, 102, 51, 0.12);
}

.GT__tabsTab.active::after,
.GT__tabsTab.Header__active::after,
li.GT__tabsTab[class*='active']::after {
    width: 100%;
    background: var(--gt-green);
    box-shadow: 0 0 12px rgba(0, 102, 51, 0.6);
}

.GT__tabIcon {
    color: var(--gt-green);
    font-size: 14px;
    opacity: 0.85;
}

/* ===== RESPONSIVE: smaller screens ===== */
@media (max-width: 768px) {
  .GT__topBarInner { flex-direction: column; gap: 6px; padding: 8px 16px; }
    .GT__headerRow { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px !important; }
  .GT__headerBrand { justify-content: center; display: flex; }
  .GT__userActions { justify-content: center; }
  .GT__tabsTab { padding: 12px 14px !important; font-size: 11px !important; }
  .GT__brandSub { display: none; }
}


/* ============================================
   REFINEMENT: brand wordmark layout fix
   Keep 'Granado Technologies' on one line
   with 'Help Center' subtitle below
   ============================================ */

.GT__brandName {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    line-height: 1.1 !important;
}

.GT__brandName > .GT__brandNamePrimary,
.GT__brandName > .GT__brandNameAccent {
    display: inline-block !important;
    vertical-align: baseline;
}

/* Wrap primary + accent on one line using a flex row */
.GT__brandName::before {
    content: '';
    display: none;
}

.GT__brandName {
    position: relative;
}

/* Use a row container trick: force first two spans onto one line */
.GT__brandNamePrimary {
    margin-right: 6px;
}

.GT__brandNamePrimary,
.GT__brandNameAccent {
    white-space: nowrap;
}

/* Make the name a single line wrap by changing the flex direction */
.GT__brandName {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
}

/* Force the subtitle onto its own line by breaking */
.GT__brandSub {
    flex-basis: 100% !important;
    width: 100% !important;
    margin-top: 2px !important;
}

/* Slightly tighten the brand block spacing */
.GT__brand {
    gap: 12px !important;
}

/* Remove white background bleed on logo (if logo has white bg) */
.GT__brandLogoImg {
    background: transparent !important;
    mix-blend-mode: screen;
    max-height: 40px !important;
}

/* Fallback if logo doesn't blend well, give it a subtle frame instead */
.GT__brandLogo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(0, 102, 51, 0.2);
    border-radius: 8px;
    padding: 6px 10px;
}

.GT__brandLogoImg {
    mix-blend-mode: normal;
}


/* ============================================
   GRANADO TECHNOLOGIES - FOOTER STYLES
   ============================================ */

.GT__footer {
    background: linear-gradient(180deg, #000000 0%, #050505 100%);
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Open Sans', sans-serif;
    position: relative;
    margin-top: 60px;
    overflow: hidden;
}

/* Subtle grid texture matching the header */
.GT__footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
          linear-gradient(rgba(0,102,51,0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(0,102,51,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    opacity: 0.5;
}

/* Top accent gradient strip */
.GT__footerAccent {
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--gt-green) 20%, var(--gt-green) 80%, transparent 100%);
    position: relative;
    z-index: 2;
}

.GT__footerAccent::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gt-green);
    filter: blur(8px);
    opacity: 0.6;
}

/* ===== MAIN FOOTER ===== */
.GT__footerMain {
    position: relative;
    z-index: 2;
    padding: 56px 24px 40px;
}

.GT__footerInner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: 48px;
}

.GT__footerCol {
    min-width: 0;
}

/* ===== COLUMN 1: BRAND ===== */
.GT__footerBrand {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 14px;
}

.GT__footerBrandPrimary {
    color: var(--gt-white);
    margin-right: 8px;
}

.GT__footerBrandAccent {
    color: var(--gt-green);
}

.GT__footerTagline {
    color: var(--gt-white);
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.GT__footerAbout {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 24px 0;
    max-width: 360px;
}

.GT__footerCerts {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 16px;
}

.GT__footerCertTitle {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.GT__footerCertList {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.GT__footerCert {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(0, 102, 51, 0.12);
    border: 1px solid rgba(0, 102, 51, 0.35);
    border-radius: 20px;
    color: var(--gt-green);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ===== COLUMN HEADINGS ===== */
.GT__footerHeading {
    color: var(--gt-white) !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 102, 51, 0.3);
    position: relative;
}

.GT__footerHeading::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 32px;
    height: 1px;
    background: var(--gt-green);
    box-shadow: 0 0 8px rgba(0, 102, 51, 0.6);
}

/* ===== LINK LISTS ===== */
.GT__footerLinks {
    list-style: none;
    margin: 0;
    padding: 0;
}

.GT__footerLinks li {
    margin-bottom: 10px;
}

.GT__footerLinks a {
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    padding-left: 0;
}

.GT__footerLinks a::before {
    content: '';
    width: 0;
    height: 1px;
    background: var(--gt-green);
    transition: width 0.25s ease;
    display: inline-block;
}

.GT__footerLinks a:hover {
    color: var(--gt-green) !important;
    text-decoration: none !important;
    padding-left: 4px;
}

.GT__footerLinks a:hover::before {
    width: 12px;
    margin-right: 4px;
}

/* ===== CONTACT COLUMN ===== */
.GT__footerContact {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
}

.GT__footerContactItem {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 13px;
}

.GT__footerContactIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(0, 102, 51, 0.12);
    border: 1px solid rgba(0, 102, 51, 0.3);
    border-radius: 8px;
    color: var(--gt-green);
    font-size: 14px;
    flex-shrink: 0;
}

.GT__footerContactItem a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.2s ease;
    word-break: break-word;
}

.GT__footerContactItem a:hover {
    color: var(--gt-green) !important;
}

/* System status indicator */
.GT__footerStatus {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(0, 102, 51, 0.1);
    border: 1px solid rgba(0, 102, 51, 0.35);
    border-radius: 20px;
    margin-top: 8px;
}

.GT__footerStatusDot {
    width: 8px;
    height: 8px;
    background: var(--gt-green);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--gt-green);
    animation: gt-pulse 2.5s ease-in-out infinite;
    display: inline-block;
}

.GT__footerStatusText {
    color: var(--gt-green);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ===== BOTTOM BAR ===== */
.GT__footerBottom {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 20px 24px;
}

.GT__footerBottomInner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.GT__footerCopy {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 500;
}

.GT__footerYear {
    color: var(--gt-green);
    font-weight: 700;
}

.GT__footerBottomLinks {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
}

.GT__footerBottomLink {
    color: rgba(255, 255, 255, 0.65) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color 0.2s ease;
}

.GT__footerBottomLink:hover {
    color: var(--gt-green) !important;
}

.GT__footerDot {
    color: rgba(255, 255, 255, 0.3);
}

.GT__footerPoweredBy {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.GT__footerPoweredBy a,
.GT__footerPoweredBy .Footer__footerLink {
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.GT__footerPoweredBy a:hover {
    color: var(--gt-green) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .GT__footerInner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .GT__footerCol--brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .GT__footerInner { grid-template-columns: 1fr; gap: 32px; }
  .GT__footerMain { padding: 40px 20px 28px; }
  .GT__footerBottomInner { flex-direction: column; text-align: center; }
  .GT__footerBottomLinks { justify-content: center; }
}


/* ============================================
   COMPREHENSIVE MOBILE & TABLET OPTIMIZATION
   Breakpoints:
     - Tablet:  <= 1024px
     - Mobile:  <= 768px
     - Small:   <= 480px
   ============================================ */

/* ---- TABLET (<= 1024px) ---- */
@media (max-width: 1024px) {
    .GT__headerRow {
          flex-wrap: wrap !important;
          gap: 16px !important;
          padding: 16px 20px !important;
  }
    .GT__headerBrand {
          order: 1;
  }
    .GT__userActions {
          order: 2;
          margin-left: auto;
  }
    .GT__headerSearch {
          order: 3;
          flex-basis: 100% !important;
          max-width: 100% !important;
          margin: 0 !important;
  }
    .GT__tabsTab {
          padding: 14px 16px !important;
          font-size: 12px !important;
  }
    .GT__topBarInner {
          padding: 6px 20px !important;
  }
    .GT__taglineText {
          font-size: 11px;
  }
}

/* ---- MOBILE (<= 768px) ---- */
@media (max-width: 768px) {
    /* Hide grid texture on mobile for cleaner look + perf */
    .GT__header::before,
    .GT__footer::before {
          opacity: 0.25;
          background-size: 24px 24px;
  }
  
    /* ===== TOP UTILITY BAR ===== */
    .GT__topBarInner {
          flex-direction: row !important;
          justify-content: center !important;
          gap: 12px !important;
          padding: 8px 12px !important;
          font-size: 10px !important;
  }
    .GT__tagline {
          display: none !important; /* save space on small screens */
  }
    .GT__topBarRight {
          gap: 10px !important;
          width: 100%;
          justify-content: center !important;
  }
    .GT__topBarLink {
          font-size: 10px !important;
  }
  
    /* ===== MAIN HEADER ===== */
    .GT__headerRow {
          flex-direction: column !important;
          align-items: stretch !important;
          gap: 14px !important;
          padding: 14px 16px !important;
  }
  
    /* Brand block: center it and reduce size */
    .GT__headerBrand {
          width: 100%;
          display: flex;
          justify-content: center;
          order: 1;
  }
    .GT__brand {
          gap: 10px !important;
  }
    .GT__brandAccent {
          height: 36px !important;
  }
    .GT__brandLogo {
          padding: 4px 8px !important;
  }
    .GT__brandLogoImg {
          max-height: 34px !important;
  }
    .GT__brandNamePrimary,
    .GT__brandNameAccent {
          font-size: 17px !important;
  }
    .GT__brandSub {
          display: none !important; /* free up vertical space */
  }
  
    /* User actions: place above search, right-aligned, compact */
    .GT__userActions {
          order: 2;
          width: 100%;
          justify-content: center !important;
          gap: 8px !important;
          margin: 0 !important;
  }
  .GT__userPref { font-size: 12px !important; }
    .GT__signInSignOut a,
    .GT__signInSignOut button {
          padding: 10px 14px !important;
          font-size: 12px !important;
          min-height: 40px;
          display: inline-flex !important;
          align-items: center;
          justify-content: center;
  }
    .GT__divider--vertical {
          height: 20px;
          margin: 0 2px;
  }
  
    /* Search: full width with prominent label */
    .GT__headerSearch {
          order: 3;
          width: 100% !important;
          flex-basis: 100% !important;
          max-width: 100% !important;
          margin: 0 !important;
  }
    .GT__searchLabel {
          text-align: center;
          font-size: 10px !important;
          margin-left: 0 !important;
  }
    .GT__headerSearchInner {
          padding: 6px 10px !important;
          min-height: 44px;
          display: flex;
          align-items: center;
  }
    .GT__headerSearchInner input {
          font-size: 16px !important; /* prevent iOS auto-zoom */
          min-height: 38px;
  }
  
    /* ===== TAB NAVIGATION: horizontal scroll on mobile ===== */
    .GT__headerNav {
          overflow: hidden;
  }
    .GT__tabs {
          padding: 0 !important;
          overflow-x: auto;
          overflow-y: hidden;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
  }
    .GT__tabs::-webkit-scrollbar {
          display: none;
  }
    .GT__tabsList {
          display: flex !important;
          flex-wrap: nowrap !important;
          gap: 0 !important;
          padding: 0 8px !important;
          width: max-content;
          min-width: 100%;
  }
    .GT__tabsTab {
          padding: 14px 14px !important;
          font-size: 11px !important;
          letter-spacing: 0.06em !important;
          flex-shrink: 0;
          min-height: 48px;
          white-space: nowrap;
  }
    .GT__tabIcon {
          font-size: 12px;
  }
  
    /* Edge fade indicators so users know they can scroll */
    .GT__headerNav {
          position: relative;
  }
    .GT__headerNav::after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          width: 24px;
          background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.6) 100%);
          pointer-events: none;
          z-index: 3;
  }
  
    /* ===== FOOTER ===== */
    .GT__footerMain {
          padding: 40px 20px 28px !important;
  }
    .GT__footerInner {
          grid-template-columns: 1fr 1fr !important;
          gap: 32px 24px !important;
  }
    .GT__footerCol--brand {
          grid-column: 1 / -1 !important;
          text-align: left;
  }
    .GT__footerBrand {
          font-size: 22px !important;
  }
    .GT__footerAbout {
          font-size: 12px !important;
          max-width: 100% !important;
  }
    .GT__footerHeading {
          font-size: 12px !important;
          margin-bottom: 14px !important;
  }
    .GT__footerLinks a {
          font-size: 13px !important;
          padding: 6px 0 !important;
          min-height: 32px;
          align-items: center;
  }
    .GT__footerContactItem {
          font-size: 12px !important;
          gap: 10px !important;
  }
    .GT__footerContactIcon {
          width: 28px;
          height: 28px;
          font-size: 12px;
  }
    .GT__footerStatus {
          padding: 7px 12px !important;
  }
    .GT__footerStatusText {
          font-size: 10px !important;
  }
  
    /* Bottom bar */
    .GT__footerBottom {
          padding: 16px 16px !important;
  }
    .GT__footerBottomInner {
          flex-direction: column !important;
          text-align: center !important;
          gap: 10px !important;
  }
    .GT__footerBottomLinks {
          justify-content: center !important;
          gap: 8px !important;
          font-size: 11px !important;
          flex-wrap: wrap;
  }
    .GT__footerCopy {
          font-size: 11px !important;
  }
    .GT__footerPoweredBy {
          font-size: 10px !important;
          flex-basis: 100%;
          justify-content: center;
          margin-top: 4px;
  }
    .GT__footerPoweredBy .GT__footerDot:nth-of-type(2) {
          display: none;
  }
  
    /* ===== BODY / CARDS ===== */
    .Body__bodyContent {
          padding: 20px 16px !important;
  }
}

/* ---- SMALL MOBILE (<= 480px) ---- */
@media (max-width: 480px) {
    /* Stack the footer fully into single column */
    .GT__footerInner {
          grid-template-columns: 1fr !important;
          gap: 28px !important;
  }
  
    /* Tighter top bar — show only Contact Support link */
    .GT__topBarRight {
          gap: 8px !important;
  }
    .GT__topBarLink:first-of-type {
          display: none; /* hide Main Site link on tiny screens */
  }
    .GT__topBarInner .GT__divider:first-of-type {
          display: none;
  }
  
    /* Brand: slightly smaller, still readable */
    .GT__brandNamePrimary,
    .GT__brandNameAccent {
          font-size: 16px !important;
  }
    .GT__brandLogoImg {
          max-height: 30px !important;
  }
    .GT__brandAccent {
          height: 30px !important;
  }
  
    /* User actions: keep both buttons visible but tighter */
    .GT__signInSignOut a,
    .GT__signInSignOut button {
          padding: 8px 12px !important;
          font-size: 11px !important;
  }
  
    /* Tabs: even tighter */
    .GT__tabsTab {
          padding: 12px 10px !important;
          font-size: 10px !important;
  }
    .GT__tabIcon {
          font-size: 11px;
  }
  
    /* Footer headings smaller */
    .GT__footerHeading {
          font-size: 11px !important;
  }
  
    /* Bottom bar links: stack on tiny screens */
    .GT__footerBottomLinks {
          flex-direction: column;
          gap: 6px !important;
  }
    .GT__footerBottomLinks .GT__footerDot {
          display: none;
  }
}

/* ===== ACCESSIBILITY: ensure all interactive targets are >= 44px on touch ===== */
@media (hover: none) and (pointer: coarse) {
    .GT__signInSignOut a,
    .GT__signInSignOut button,
    .GT__tabsTab,
    .GT__footerLinks a,
    .GT__footerBottomLink {
          min-height: 44px;
          display: inline-flex;
          align-items: center;
  }
}

/* ===== iOS SAFE AREA (notch-safe padding) ===== */
@supports (padding: max(0px)) {
    .GT__topBar,
    .GT__headerRow,
    .GT__footerMain,
    .GT__footerBottom {
          padding-left: max(16px, env(safe-area-inset-left));
          padding-right: max(16px, env(safe-area-inset-right));
  }
}


/* ============================================
   FINAL FIXES: brand wordmark + mobile auth visibility
   These overrides come LAST so they win the cascade.
   ============================================ */

/* Force 'Granado' white, 'Technologies' green at all sizes */
.GT__brandNamePrimary,
.GT__footerBrandPrimary {
    color: #FFFFFF !important;
}
.GT__brandNameAccent,
.GT__footerBrandAccent {
    color: #006633 !important;
}

/* Keep the wordmark on a single line at all viewport widths */
.GT__brandName {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    white-space: nowrap;
}
.GT__brandNamePrimary,
.GT__brandNameAccent {
    display: inline !important;
    white-space: nowrap !important;
}
.GT__brandSub {
    flex-basis: 100% !important;
    width: 100% !important;
}

/* On very small screens, allow the wordmark to wrap as a fallback
   but keep alignment clean */
@media (max-width: 360px) {
    .GT__brandName {
          flex-direction: column !important;
          align-items: flex-start !important;
          line-height: 1.1 !important;
  }
    .GT__brandNamePrimary,
    .GT__brandNameAccent {
          font-size: 15px !important;
  }
}

/* ============================================
   MOBILE AUTH (Sign In / Sign Up) VISIBILITY FIX
The original Zoho ${SignInSignOut} can render as
   an icon-only user silhouette on small screens.
   Force it to show readable text buttons.
   ============================================ */
@media (max-width: 768px) {
    /* Make sure the auth container shows actual text, not icons */
    .GT__signInSignOut {
          width: 100%;
          justify-content: center !important;
          display: flex !important;
          flex-wrap: wrap;
          gap: 8px !important;
  }
  
    /* Ensure any nested SVGs in the auth area don't render as the primary control */
    .GT__signInSignOut svg {
          display: none !important;
  }
  
    /* Make all auth links visible as buttons */
    .GT__signInSignOut a,
    .GT__signInSignOut button,
    .GT__signInSignOut span > a {
          background: rgba(255, 255, 255, 0.06) !important;
          border: 1px solid rgba(255, 255, 255, 0.15) !important;
          color: #FFFFFF !important;
          padding: 10px 18px !important;
          border-radius: 8px !important;
          text-decoration: none !important;
          font-size: 13px !important;
          font-weight: 700 !important;
          letter-spacing: 0.04em;
          text-transform: uppercase;
          min-width: 90px;
          text-align: center;
          min-height: 42px;
          display: inline-flex !important;
          align-items: center;
          justify-content: center;
          visibility: visible !important;
          opacity: 1 !important;
  }
  
    /* Style the Sign Up (last child) as primary green CTA */
    .GT__signInSignOut a:last-child,
    .GT__signInSignOut button:last-child {
          background: #006633 !important;
          border-color: #006633 !important;
  }
  
    /* User preference (language) selector — keep compact */
    .GT__userPref {
          display: none !important; /* hide language selector on mobile to save room */
  }
    .GT__divider--vertical {
          display: none !important;
  }
  
    /* Tighten the user actions row */
    .GT__userActions {
          padding: 0 !important;
  }
}

/* ============================================
   ADDITIONAL MOBILE POLISH
   ============================================ */
@media (max-width: 768px) {
    /* Ensure 'Granado Technologies' stays on one line and is centered */
    .GT__brand {
          flex-wrap: nowrap !important;
          justify-content: center;
  }
    .GT__brandName {
          align-items: center !important;
          text-align: center;
  }
  
    /* Slightly more breathing room between top bar and main header */
    .GT__topBar + .GT__headerContainer .GT__headerRow {
          padding-top: 16px !important;
  }
  
    /* Footer column headings: center-align on tiny screens for symmetry */
    .GT__footerCol:not(.GT__footerCol--brand) {
          text-align: center;
  }
    .GT__footerCol:not(.GT__footerCol--brand) .GT__footerHeading::after {
          left: 50%;
          transform: translateX(-50%);
  }
    .GT__footerCol:not(.GT__footerCol--brand) .GT__footerLinks a {
          justify-content: center;
  }
    .GT__footerContactItem {
          justify-content: center;
  }
    .GT__footerStatus {
          margin: 12px auto 0 !important;
  }
    .GT__footerCol--brand {
          text-align: center !important;
  }
    .GT__footerAbout {
          margin-left: auto !important;
          margin-right: auto !important;
  }
    .GT__footerCerts {
          text-align: center;
  }
    .GT__footerCertList {
          justify-content: center;
  }
}

@media (max-width: 480px) {
    /* Stack the footer fully and center everything */
    .GT__footerCol {
          text-align: center !important;
  }
    .GT__footerHeading {
          margin-bottom: 16px !important;
  }
    .GT__footerHeading::after {
          left: 50% !important;
          transform: translateX(-50%) !important;
  }
}


/* ============================================
   ULTRA-HIGH-SPECIFICITY OVERRIDES (last word)
   Targeting the exact span hierarchy to win cascade.
   ============================================ */

/* Brand wordmark colors — maximum specificity */
header.GT__header .GT__brandName span.GT__brandNamePrimary,
footer.GT__footer .GT__footerBrand span.GT__footerBrandPrimary {
    color: #FFFFFF !important;
}

header.GT__header .GT__brandName span.GT__brandNameAccent,
footer.GT__footer .GT__footerBrand span.GT__footerBrandAccent {
    color: #006633 !important;
}

/* Force the brand wordmark layout: 'Granado' inline with 'Technologies',
   subtitle below. Works at ALL screen widths above 360px. */
header.GT__header .GT__brandName {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    column-gap: 6px !important;
    row-gap: 2px !important;
    white-space: normal !important;
}

header.GT__header .GT__brandName .GT__brandNamePrimary,
header.GT__header .GT__brandName .GT__brandNameAccent {
    display: inline-block !important;
    white-space: nowrap !important;
    vertical-align: baseline !important;
}

header.GT__header .GT__brandName .GT__brandSub {
    flex-basis: 100% !important;
    width: 100% !important;
    display: block !important;
}

/* ============================================
   MOBILE AUTH — force visible text-based buttons
   ============================================ */
@media (max-width: 768px) {
    /* Restore the visibility of the auth row */
    .GT__userActions {
          display: flex !important;
          visibility: visible !important;
          width: 100% !important;
          order: 2 !important;
  }
  
    .GT__signInSignOut {
          display: flex !important;
          visibility: visible !important;
          width: 100% !important;
          justify-content: center !important;
          gap: 10px !important;
  }
  
    /* Restore svg display in case Zoho uses it as an icon (we previously hid all) */
    .GT__signInSignOut svg {
          display: inline-block !important;
          width: 14px;
          height: 14px;
  }
  
    /* Ensure every direct interactive child becomes a styled button */
    .GT__signInSignOut > a,
    .GT__signInSignOut > span,
    .GT__signInSignOut > button,
    .GT__signInSignOut a {
          display: inline-flex !important;
          visibility: visible !important;
          align-items: center !important;
          justify-content: center !important;
          padding: 10px 18px !important;
          background: rgba(255, 255, 255, 0.08) !important;
          border: 1px solid rgba(255, 255, 255, 0.18) !important;
          border-radius: 8px !important;
          color: #FFFFFF !important;
          text-decoration: none !important;
          font-family: 'Open Sans', sans-serif !important;
          font-size: 13px !important;
          font-weight: 700 !important;
          letter-spacing: 0.04em !important;
          text-transform: uppercase !important;
          min-height: 44px !important;
          min-width: 90px !important;
          opacity: 1 !important;
  }
  
    /* The last anchor in the auth area is typically Sign Up — make it green */
    .GT__signInSignOut > a:last-of-type,
    .GT__signInSignOut > span:last-of-type a {
          background: #006633 !important;
          border-color: #006633 !important;
  }
}

/* ============================================
   FOOTER BRAND: force same colors
   ============================================ */
footer.GT__footer .GT__footerBrand {
    display: block !important;
}
footer.GT__footer .GT__footerBrand .GT__footerBrandPrimary {
    color: #FFFFFF !important;
    margin-right: 8px !important;
}
footer.GT__footer .GT__footerBrand .GT__footerBrandAccent {
    color: #006633 !important;
}


/* ============================================
   ZOHO MOBILE AUTH ICON — expand to full buttons
The Zoho ${SignInSignOut} template, when the
   viewport is narrow, collapses into a single
   user-icon SVG. We force it to display the
   underlying text links as proper buttons.
   ============================================ */
@media (max-width: 768px) {
  
    /* Target any descendant of GT__signInSignOut at any nesting depth */
    .GT__signInSignOut,
    .GT__signInSignOut * {
          visibility: visible !important;
          opacity: 1 !important;
  }
  
    /* If Zoho wraps everything in a hidden mobile menu, force it open */
    .GT__signInSignOut [class*='hidden'],
    .GT__signInSignOut [class*='Hidden'],
    .GT__signInSignOut [style*='display: none'],
    .GT__signInSignOut [style*='display:none'] {
          display: inline-flex !important;
  }
  
    /* Hide the standalone user-icon SVG that Zoho uses as a collapsed indicator */
    .GT__signInSignOut > svg,
    .GT__signInSignOut > span > svg:only-child,
    .GT__userActions > svg {
          display: none !important;
  }
  
    /* Show all anchor links as text buttons */
    .GT__signInSignOut a,
    .GT__userActions a {
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          visibility: visible !important;
          opacity: 1 !important;
          padding: 10px 18px !important;
          background: rgba(255, 255, 255, 0.08) !important;
          border: 1px solid rgba(255, 255, 255, 0.18) !important;
          border-radius: 8px !important;
          color: #FFFFFF !important;
          text-decoration: none !important;
          font-family: 'Open Sans', sans-serif !important;
          font-size: 13px !important;
          font-weight: 700 !important;
          letter-spacing: 0.04em !important;
          text-transform: uppercase !important;
          min-height: 44px !important;
          min-width: 90px !important;
          margin: 0 4px !important;
          white-space: nowrap !important;
  }
  
    /* Hide any icon-only buttons that might exist alongside the text links */
    .GT__signInSignOut button[aria-label*='user' i],
    .GT__signInSignOut button[aria-label*='menu' i],
    .GT__signInSignOut button[aria-label*='profile' i],
    .GT__signInSignOut button[title*='user' i],
    .GT__signInSignOut button[title*='menu' i] {
          display: none !important;
  }
  
    /* Last anchor as primary green CTA */
    .GT__signInSignOut a:last-of-type {
          background: #006633 !important;
          border-color: #006633 !important;
  }
  
    .GT__signInSignOut a:last-of-type:hover {
          background: #008844 !important;
          border-color: #008844 !important;
  }
}


/* ============================================
   MOBILE AUTH BUTTONS (injected by JS)
   ============================================ */
.GT__mobileAuthBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 22px !important;
    border-radius: 8px !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    min-height: 44px !important;
    min-width: 100px !important;
    margin: 0 4px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.GT__mobileSignIn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
}

.GT__mobileSignIn:hover,
.GT__mobileSignIn:active {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #FFFFFF !important;
}

.GT__mobileSignUp {
    background: #006633 !important;
    border: 1px solid #006633 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(0, 102, 51, 0.35);
}

.GT__mobileSignUp:hover,
.GT__mobileSignUp:active {
    background: #008844 !important;
    border-color: #008844 !important;
}