html {
    font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;
    line-height: 1.5
}

@font-face {
    font-family:Inter var;
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url("/fonts/Inter-roman.var.woff2?v=3.18") format("woff2");
    font-named-instance:Regular
}
@font-face {
    font-family:Inter var;
    font-style:italic;
    font-weight:100 900;
    font-display:swap;
    src:url("/fonts/Inter-italic.var.woff2?v=3.18") format("woff2");
    font-named-instance:Italic
}

/* ============================================================
   Pricepoint — colour scheme overrides (replaces Tailwind defaults)
   ============================================================ */

/* General blue */
.text-blue-600, .hover\:text-blue-600:hover { color: #0047AB !important; }
.text-indigo-600                             { color: #007DAB !important; }
.bg-blue-500                                 { background-color: #007DAB !important; }
.bg-blue-600                                 { background-color: #0047AB !important; }
.from-blue-600                               { --tw-gradient-from: #0047AB !important; }
.to-indigo-800                               { --tw-gradient-to: #0011AB !important; }

/* Installer — orange → #2600AB */
.bg-orange-500                  { background-color: #2600AB !important; }
.bg-orange-50                   { background-color: rgba(38,0,171,0.04) !important; }
.border-orange-100              { border-color: rgba(38,0,171,0.15) !important; }
.border-orange-200              { border-color: rgba(38,0,171,0.2) !important; }
.hover\:border-orange-300:hover { border-color: rgba(38,0,171,0.4) !important; }
.hover\:bg-orange-50:hover      { background-color: rgba(38,0,171,0.04) !important; }
.hover\:bg-orange-100:hover     { background-color: rgba(38,0,171,0.08) !important; }
.text-orange-300                { color: rgba(38,0,171,0.45) !important; }
.hover\:text-orange-500:hover   { color: #2600AB !important; }

/* Fabricator — purple → #00ABA2 */
.bg-purple-600                  { background-color: #00ABA2 !important; }
.bg-purple-50                   { background-color: rgba(0,171,162,0.04) !important; }
.border-purple-100              { border-color: rgba(0,171,162,0.15) !important; }
.border-purple-200              { border-color: rgba(0,171,162,0.2) !important; }
.hover\:border-purple-300:hover { border-color: rgba(0,171,162,0.4) !important; }
.hover\:bg-purple-50:hover      { background-color: rgba(0,171,162,0.04) !important; }
.hover\:bg-purple-100:hover     { background-color: rgba(0,171,162,0.08) !important; }
.text-purple-300                { color: rgba(0,171,162,0.45) !important; }
.hover\:text-purple-500:hover   { color: #00ABA2 !important; }

/* ============================================================
   Page hero — shared title treatment for secondary pages
   (feature pages, pricing, contact, privacy policy).
   Keeps the gap between the header and the title, and the
   title's size/weight, consistent across every page that
   isn't the homepage or the Installers/Fabricators pages.
   ============================================================ */
.page-hero {
    padding-top: 3rem;   /* 48px — same gap on every breakpoint */
    text-align: center;
}
.page-hero-title {
    font-size: 2.25rem;      /* text-4xl */
    font-weight: 800;        /* font-extrabold */
    color: #111827;          /* text-gray-900 */
    line-height: 1.25;       /* leading-tight */
    text-align: center;
    max-width: 56rem;        /* max-w-4xl */
    margin: 0 auto 1.5rem;   /* mb-6, centered */
}
@media (min-width: 640px) {
    .page-hero-title { font-size: 3rem; } /* sm:text-5xl */
}
.page-hero-subtext {
    font-size: 1.25rem;      /* text-xl */
    color: #6b7280;          /* text-gray-500 */
    text-align: center;
    max-width: 42rem;        /* max-w-2xl */
    margin: 0 auto;
}

/* ============================================================
   Features mega-menu — "Who are you?" audience selector +
   feature list. Shared across every page that includes the
   Features dropdown.
   ============================================================ */
.mega-menu-dropdown {
    width: 700px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(15,23,42,0.16), 0 2px 8px rgba(15,23,42,0.06);
    padding: 28px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
}
.mega-menu-dropdown--single {
    width: 420px;
    display: block;
}

.mega-menu-features-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9ca3af;
    margin: 0 0 10px;
}

.mega-menu-feature-rows-list.hidden { display: none; }
.mega-menu-feature-rows-list { display: flex; flex-direction: column; }

.mega-menu-feature-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
    text-decoration: none;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.15s ease;
}
.mega-menu-feature-rows-list .mega-menu-feature-row:last-child { border-bottom: none; }
.mega-menu-feature-row:hover { background: #f8fafc; }

.mega-menu-feature-row-icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,71,171,0.08);
    color: #0047AB;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.mega-menu-feature-row-icon svg { width: 17px; height: 17px; }

.mega-menu-feature-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.mega-menu-feature-row-title { font-size: 0.85rem; font-weight: 700; color: #111827; }
.mega-menu-feature-row-desc  { font-size: 0.72rem; color: #6b7280; margin-top: 1px; }

.mega-menu-feature-row-chevron { flex-shrink: 0; width: 14px; height: 14px; color: #d1d5db; }

@media (max-width: 640px) {
    .mega-menu-dropdown { grid-template-columns: 1fr; width: 360px; padding: 20px; }
    .mega-menu-dropdown--single { width: 320px; }
}

/* ============================================================
   Feature page hero image — rounded corners to match the
   1rem radius used on the in-page section images.
   Shared across every feature detail page (Leads & Enquiries,
   Sales, Survey, Purchasing, Installation, Scheduling,
   Manufacturing, After Sales).
   ============================================================ */
.hero-feature-img {
    border-radius: 1rem;
}