/* ---------------------------------------------------------------------------
   Globosoft design system — type, palette and rhythm
   ---------------------------------------------------------------------------
   Mirrors globosoft.org (assets/css/site.css): one typeface, one display
   scale, one palette.

     Poppins   weights 400-800, used for display and body alike.
     Display   h1-h4 at weight 700, tracking -0.04em (h4 -0.03em).
     Body      weight 400, tracking -0.01em, leading 1.7.
     Nav       12px, weight 600, +0.04em, uppercase.
     Buttons   weight 800, +0.03em, uppercase.
     Labels    11px, weight 800, +0.12em, uppercase, primary red.

   Fallback stack: Avenir Next, Segoe UI, Helvetica Neue, Arial, sans-serif.

   Loaded after main.css. Base rules are enforced because main.css is minified
   and sets type through compound selectors that outrank normal specificity.
   --------------------------------------------------------------------------- */

:root {
    /* Official palette, Globosoft Brand Sheet 2026 */
    --red: #c02228;
    --red-dark: #8e1117;
    --red-light: #ef6b71;
    --ink: #1a1a1a;
    --rose: #fce7e7;
    --charcoal: #262626;
    --muted: #6b6b6b;
    --paper: #faf6f6;
    --paper-deep: #fce7e7;
    --white: #ffffff;
    --line: rgba(26, 26, 26, 0.14);
    --line-soft: rgba(26, 26, 26, 0.07);

    --font-display: "Poppins", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Poppins", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    --pad-x: clamp(24px, 6vw, 104px);
}

/* --------------------------------------------------------------------------
   Body and UI
   -------------------------------------------------------------------------- */
body,
p, a, li, td, th, label, span, div, section, article, aside, figcaption,
blockquote, strong, b, em, i, small, input, select, textarea, legend, fieldset,
header, footer, nav, main, form, button, address {
    font-family: var(--font-body) !important;
    letter-spacing: -0.01em !important;
}

body {
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

p, li, blockquote, td, address {
    line-height: 1.7;
}

/* Icon fonts keep their own family and metrics. */
.fa, .fa *, [class^="fa-"], [class*=" fa-"],
.lnr, [class^="lnr-"], [class*=" lnr-"],
.glyphicon, [class^="glyphicon-"] {
    letter-spacing: normal !important;
}
i.fa, i[class^="fa-"], i[class*=" fa-"],
span.fa, span[class^="fa-"], span[class*=" fa-"] {
    font-family: FontAwesome !important;
}

/* --------------------------------------------------------------------------
   Display scale — matches globosoft.org
   -------------------------------------------------------------------------- */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
    font-family: var(--font-display) !important;
    font-weight: 700;
    letter-spacing: -0.04em !important;
}

h1, .h1 {
    font-size: clamp(38px, 5.2vw, 76px) !important;
    line-height: 1.04 !important;
}

h2, .h2 {
    font-size: clamp(30px, 3.4vw, 52px) !important;
    line-height: 1.1 !important;
}

h3, .h3 {
    font-size: clamp(20px, 1.9vw, 28px) !important;
    line-height: 1.24 !important;
    letter-spacing: -0.03em !important;
}

h4, .h4 {
    font-size: clamp(17px, 1.35vw, 21px) !important;
    line-height: 1.34 !important;
    letter-spacing: -0.03em !important;
}

h5, h6, .h5, .h6 {
    font-family: var(--font-body) !important;
    font-weight: 600;
    letter-spacing: -0.01em !important;
    line-height: 1.4;
}

/* Size utilities complete the ladder, so a heading can be moved to the right
   level for the document outline while keeping the size it already rendered at. */
.h5 { font-size: 24px !important; }
.h6 { font-size: 20px !important; }

/* Table row headers and FAQ questions read as display type. */
table th,
.market-compare-table tbody th,
.market-faq h3,
.shopify-faq h3 {
    font-family: var(--font-display) !important;
    font-weight: 700;
    letter-spacing: -0.02em !important;
}

/* Statistics and large figures. */
.market-stat strong,
.shopify-stat strong,
.market-rating-value {
    font-family: var(--font-display) !important;
    font-weight: 700;
    letter-spacing: -0.03em !important;
}

/* --------------------------------------------------------------------------
   Navigation — 12px, 600, +0.04em, uppercase
   -------------------------------------------------------------------------- */
#gptw-navigation nav ul,
#gptw-navigation nav ul li,
#gptw-navigation nav ul li a,
#gptw-navigation nav ul li span a,
#gptw-navigation nav ul li .separator a {
    font-family: var(--font-body) !important;
    font-weight: 600;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
}

#gptw-navigation .desktop-bottom nav ul > li > span > a,
#gptw-navigation nav.dropdown > ul > li > span > a {
    font-size: 12px;
}

/* Submenu entries sit a level down: sentence case, lighter tracking. */
#gptw-navigation nav ul li ul,
#gptw-navigation nav ul li ul li,
#gptw-navigation nav ul li ul li a {
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.01em !important;
    text-transform: none;
}

/* Utility bar above the main nav. */
#hello-bar,
#hello-bar a,
#gptw-navigation .desktop-top .menu__,
#gptw-navigation .desktop-top .menu__ li,
#gptw-navigation .desktop-top .menu__ a {
    font-family: var(--font-body) !important;
    font-weight: 500;
    letter-spacing: -0.01em !important;
    text-transform: none;
}

/* --------------------------------------------------------------------------
   Buttons and calls to action — weight 800, +0.03em, uppercase
   -------------------------------------------------------------------------- */
.btn,
.btn-primary,
.btn-bordered,
.banner-btn,
.service-enq,
.enquiry,
.mktoButton,
.market-button,
input[type="submit"],
button[type="submit"] {
    font-family: var(--font-body) !important;
    font-weight: 800 !important;
    font-size: 12px;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
}

.market-proof-link,
.market-related-card a,
.shopify-related-card a {
    font-weight: 800;
    letter-spacing: 0.025em !important;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Micro-labels and section indexes — 11px, 800, +0.12em, uppercase, red
   -------------------------------------------------------------------------- */
.market-eyebrow,
.shopify-eyebrow,
.eyebrow,
.section-index,
.market-proof-label,
.market-case-label,
.shopify-case-label {
    font-family: var(--font-body) !important;
    font-weight: 800 !important;
    font-size: 11px;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--red);
}

/* ---------------------------------------------------------------
   Horizontal overflow fix
   100vw includes the vertical scrollbar gutter, so a 100vw block
   sits 15px wider than the content box and forces a horizontal
   scrollbar on every page. Constrain to the containing block and
   clip at the root as a backstop.
   --------------------------------------------------------------- */
html { overflow-x: hidden; }

#hello-bar {
    width: 100% !important;
    max-width: 100% !important;
}

/* ---------------------------------------------------------------------------
   Text selection
   ---------------------------------------------------------------------------
   Selection paints the brand red behind white text, so it reads the same on a
   light page, a dark panel or the red closing band. The prefixed rule is kept
   in its own block: a browser that does not recognise ::-moz-selection would
   discard the whole selector list if the two were combined.
   --------------------------------------------------------------------------- */
::selection {
    background: var(--red, #c02228);
    color: #fff;
    text-shadow: none;
}

::-moz-selection {
    background: var(--red, #c02228);
    color: #fff;
    text-shadow: none;
}

/* Selecting inside the red closing panel would otherwise be red on red. */
.home-page .hp-cta ::selection,
.market-cta ::selection,
.shopify-cluster-page .shopify-cta ::selection {
    background: #fff;
    color: var(--red, #c02228);
}

.home-page .hp-cta ::-moz-selection,
.market-cta ::-moz-selection,
.shopify-cluster-page .shopify-cta ::-moz-selection {
    background: #fff;
    color: var(--red, #c02228);
}