@font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url(/assets/fonts/montserrat-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    :root {
      --primary: 185 50% 24%;
      --primary-color: #1E555A;
      --primary-rgb: 30, 85, 90;
      --background: 0 0% 100%;
      --foreground: 222.2 84% 4.9%;
      --card: 0 0% 100%;
      --card-foreground: 222.2 84% 4.9%;
      --popover: 0 0% 100%;
      --popover-foreground: 222.2 84% 4.9%;
      --primary-foreground: 0 0% 100%;
      --secondary: 210 40% 96%;
      --secondary-foreground: 222.2 84% 4.9%;
      --muted: 210 40% 96%;
      --muted-foreground: 215.4 16.3% 46.9%;
      --accent: 210 40% 96%;
      --accent-foreground: 222.2 84% 4.9%;
      --destructive: 0 84.2% 60.2%;
      --destructive-foreground: 210 40% 98%;
      --border: 214.3 31.8% 91.4%;
      --input: 214.3 31.8% 91.4%;
      --ring: 185 50% 24%;
      --radius: 0.5rem;
    }
    html { scroll-behavior: smooth; overflow-x: hidden; }
    body {
      -webkit-font-smoothing: antialiased;
      font-family: 'Montserrat', sans-serif;
      overflow-x: hidden;
      max-width: 100%;
      padding-top: 4rem;
    }
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 40;
      background: #fff;
    }
    .nav-popular-badge {
      font-size: 0.5rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #1E555A;
      background: #1E555A18;
      padding: 0.15rem 0.4rem;
      border-radius: 9999px;
      line-height: 1;
      flex-shrink: 0;
    }
    .nav-tab-popular {
      color: #1E555A !important;
    }
    .text-primary { color: #1E555A; }
    .bg-primary { background-color: #1E555A; }
    .border-primary { border-color: #1E555A; }
    .hover\:bg-primary\/90:hover { background-color: #1E555Aee; }
    .hover\:text-primary:hover { color: #1E555A; }
    details summary { list-style: none; cursor: pointer; }
    details summary::-webkit-details-marker { display: none; }
    details[open] summary svg.rotate-target { transform: rotate(180deg); }
    .product-nav { background: transparent; border-bottom: 1px solid #e5e7eb; position: sticky; top: 64px; z-index: 40; }
    .mobile-tabbar { display: none; }
    
    /* ── Modern Breadcrumbs Styling ───────────────────────────── */
    .breadcrumb-container {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 9999px;
      padding: 0.35rem 1rem;
      display: inline-flex;
      align-items: center;
      margin-top: 0.5rem;
      margin-bottom: 1rem;
    }
    .breadcrumb-list {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 0.4rem;
      font-size: 0.75rem;
      font-weight: 500;
      color: #64748b;
      overflow-x: auto;
      scrollbar-width: none;
      max-width: 100%;
    }
    .breadcrumb-list::-webkit-scrollbar {
      display: none;
    }
    .breadcrumb-item {
      display: flex;
      align-items: center;
      white-space: nowrap;
      min-width: 0;
    }
    .breadcrumb-item a {
      color: #64748b;
      transition: color 0.2s ease;
      display: flex;
      align-items: center;
      gap: 0.25rem;
      text-decoration: none;
    }
    .breadcrumb-item a:hover {
      color: #1E555A;
    }
    .breadcrumb-item.active {
      color: #0f172a;
      font-weight: 600;
    }
    .breadcrumb-separator {
      color: #cbd5e1;
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    /* Site-wide list indentation (list-disc/pl-* not in compiled Tailwind) */
    .site-list,
    details ul:not(.faq-list):not(.breadcrumb-list) {
      list-style-type: disc;
      list-style-position: outside;
      padding-left: 1.5rem;
      margin-left: 0;
    }
    .site-list li,
    details ul:not(.faq-list):not(.breadcrumb-list) li {
      display: list-item;
      padding-left: 0.25rem;
      margin-bottom: 0.35rem;
    }
    ul.faq-list {
      list-style: none;
      padding-left: 1.25rem;
      margin-left: 0;
    }
    ul.faq-list > li {
      display: flex;
      gap: 0.5rem;
      align-items: flex-start;
      margin-bottom: 0.35rem;
    }
    ul.faq-list > li > span:first-child {
      flex-shrink: 0;
      width: 0.65rem;
    }
    ol.site-list,
    details ol {
      list-style-type: decimal;
      list-style-position: outside;
      padding-left: 1.5rem;
      margin-left: 0;
    }
    ol.site-list li,
    details ol li {
      display: list-item;
      padding-left: 0.25rem;
      margin-bottom: 0.35rem;
    }
    /* ─── Product Accordion (Benefits / Features / Use Cases) ─── */
    .pd-accordion { display: flex; flex-direction: column; gap: 0.45rem; }
    .pd-acc-item {
      border-radius: 0.875rem;
      border: 1.5px solid #e5e7eb;
      overflow: hidden;
      background: #fff;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .pd-acc-item[open] {
      border-color: #1E555A55;
      box-shadow: 0 3px 14px rgba(0,0,0,0.07);
    }
    .pd-acc-item > summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.9rem 1.1rem;
      cursor: pointer;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: #374151;
      user-select: none;
      list-style: none;
      transition: background 0.15s;
      gap: 0.5rem;
    }
    .pd-acc-item > summary::-webkit-details-marker { display: none; }
    .pd-acc-item[open] > summary {
      background: #1E555A0d;
      color: #1E555A;
      border-bottom: 1px solid #1E555A22;
    }
    .pd-acc-item > summary .pd-acc-icon { flex-shrink: 0; opacity: 0.7; }
    .pd-acc-item[open] > summary .pd-acc-icon { opacity: 1; }
    .pd-acc-item > summary .pd-chevron { flex-shrink: 0; transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); }
    .pd-acc-item[open] > summary .pd-chevron { transform: rotate(180deg); }
    .pd-acc-body { padding: 0.875rem 1.1rem 1.1rem; }
    /* Benefits grid */
    .pd-benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1.25rem; }
    @media (max-width: 600px) { .pd-benefits-grid { grid-template-columns: 1fr; } }
    .pd-benefit-item { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.82rem; color: #374151; line-height: 1.45; }
    .pd-benefit-check { flex-shrink: 0; width: 1rem; height: 1rem; margin-top: 0.15rem; color: #1E555A; }
    /* Features rows */
    .pd-features-list { display: flex; flex-direction: column; }
    .pd-feature-row { display: flex; gap: 0; align-items: flex-start; padding: 0.5rem 0; border-bottom: 1px solid #f3f4f6; font-size: 0.82rem; }
    .pd-feature-row:last-child { border-bottom: none; }
    .pd-feature-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #1E555A; margin-top: 0.4rem; margin-right: 0.65rem; flex-shrink: 0; }
    .pd-feature-key { font-weight: 700; color: #111827; margin-right: 0.3rem; }
    .pd-feature-val { color: #6b7280; }
    /* Use case tags */
    .pd-usecases { display: flex; flex-wrap: wrap; gap: 0.45rem; }
    .pd-usecase-tag {
      display: inline-flex; align-items: center; gap: 0.35rem;
      background: #1E555A0d;
      border: 1px solid #1E555A30;
      border-radius: 9999px;
      padding: 0.3rem 0.8rem;
      font-size: 0.75rem;
      font-weight: 600;
      color: #1E555A;
    }

    /* Header contact — full label on all screen sizes */
    #header-contact-btn .header-contact-label { white-space: nowrap; display: inline; }
    @media (max-width: 767px) {
      #header-contact-btn { flex-shrink: 1; min-width: 0; font-size: 0.625rem; padding: 0.45rem 0.55rem; gap: 0.35rem; max-width: 100%; }
      #header-contact-btn .header-contact-icon { display: none; }
      #header-contact-btn .header-contact-label { font-size: 0.625rem; line-height: 1.2; }
    }
    @media (min-width: 768px) {
      #header-contact-btn .header-contact-icon { display: inline-flex; }
    }

    @media (max-width: 768px) {
      .header-container { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
      .top-cart { display: none !important; }
      
      /* ─── Mobile bottom shop bar (edge-to-edge, conversion-focused) ─── */
      .mobile-tabbar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        padding: 0;
        margin: 0;
      }
      .nav-progress {
        position: fixed;
        top: 0;
        left: 0;
        height: 3px;
        width: 0;
        z-index: 60;
        background: linear-gradient(90deg, #1E555A, #1E555Acc);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.08s ease;
        box-shadow: 0 0 12px #1E555A66;
      }
      .nav-progress.is-active {
        opacity: 1;
        animation: navProgressPulse 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      }
      @keyframes navProgressPulse {
        0% { width: 0; }
        15% { width: 35%; }
        50% { width: 65%; }
        100% { width: 92%; }
      }
      .mobile-tabs {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        min-height: 4.5rem;
        margin: 0;
        border-radius: 0;
        border: none;
        border-top: 2px solid #1E555A22;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafb 100%);
        padding: 0.4rem 0.15rem 0;
        padding-bottom: max(0.6rem, env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.12), 0 -1px 0 rgba(0, 0, 0, 0.05);
        gap: 0.15rem;
      }
      .mobile-tabs .nav-item {
        flex: 1 1 0;
        min-width: 0;
        min-height: 3.75rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.35rem 0.2rem 0.4rem;
        margin: 0 0.1rem;
        text-decoration: none;
        color: #64748b;
        background: transparent;
        border: none;
        border-radius: 14px;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        will-change: transform;
        transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease;
      }
      .mobile-tabs .nav-item::before {
        content: '';
        position: absolute;
        inset: 2px;
        border-radius: 12px;
        background: #1E555A;
        opacity: 0;
        transform: scale(0.85);
        transition: opacity 0.1s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
        pointer-events: none;
      }
      .mobile-tabs .nav-item.tab-pressed::before {
        opacity: 0.12;
        transform: scale(1);
      }
      .mobile-tabs .nav-item.tab-pressed {
        transform: scale(0.94);
      }
      .mobile-tabs .nav-item .tab-icon-wrap {
        position: relative;
        z-index: 1;
        width: 2.125rem;
        height: 2.125rem;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eef2f6;
        color: #64748b;
        margin-bottom: 0.2rem;
        transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease, color 0.15s ease, box-shadow 0.2s ease;
      }
      .mobile-tabs .nav-item.tab-pressed .tab-icon-wrap {
        transform: scale(0.88);
      }
      .mobile-tabs .nav-item .tab-icon {
        width: 1.15rem;
        height: 1.15rem;
        flex-shrink: 0;
      }
      .mobile-tabs .nav-item .tab-label {
        position: relative;
        z-index: 1;
        font-size: 0.72rem;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        color: #1f2937;
        line-height: 1.15;
        letter-spacing: -0.01em;
        transition: color 0.15s ease;
      }
      .mobile-tabs .nav-item .tab-sub {
        position: relative;
        z-index: 1;
        font-size: 0.58rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        margin-top: 2px;
        color: #1E555A;
        opacity: 0.85;
        line-height: 1.1;
        transition: color 0.15s ease, opacity 0.15s ease;
      }
      .mobile-tabs .nav-item.active,
      .mobile-tabs .nav-item.tab-preview {
        background: #1E555A10;
      }
      .mobile-tabs .nav-item.active .tab-icon-wrap,
      .mobile-tabs .nav-item.tab-preview .tab-icon-wrap {
        background: #1E555A;
        color: #fff;
        box-shadow: 0 4px 14px #1E555A45;
        transform: scale(1.05);
      }
      .mobile-tabs .nav-item.tab-pressed.active .tab-icon-wrap,
      .mobile-tabs .nav-item.tab-pressed.tab-preview .tab-icon-wrap {
        transform: scale(0.92);
      }
      .mobile-tabs .nav-item.active .tab-label,
      .mobile-tabs .nav-item.tab-preview .tab-label {
        color: #1E555A;
        font-weight: 800;
      }
      .mobile-tabs .nav-item.active .tab-sub,
      .mobile-tabs .nav-item.tab-preview .tab-sub {
        color: #1E555A;
        opacity: 1;
      }
      .mobile-tabs .nav-item.active::after {
        content: '';
        position: absolute;
        top: 0;
        left: 22%;
        right: 22%;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: #1E555A;
        box-shadow: 0 2px 8px #1E555A55;
      }
      .mobile-tabs .nav-item .tab-popular-badge {
        position: absolute;
        top: 0.1rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.45rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #fff;
        background: #1E555A;
        padding: 1px 5px;
        border-radius: 4px;
        line-height: 1.3;
        z-index: 2;
        white-space: nowrap;
        opacity: 0.92;
        box-shadow: 0 1px 3px #1E555A35;
      }
      .mobile-tabs .nav-item--popular .tab-icon-wrap {
        margin-top: 0.3rem;
      }

      body { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
      main { padding-bottom: 1rem !important; }
      .mobile-full-width { padding-left: 1rem !important; padding-right: 1rem !important; }
      .hero-title { font-size: clamp(2.25rem, 10vw, 3.25rem) !important; line-height: 1.05 !important; }
      .section-header-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; min-width: 0; }
      .section-header-row .section-header-divider { display: none; }
      .section-header-row h2 { font-size: 1.75rem; line-height: 1.1; }
      .section-header-row p { font-size: 0.75rem; }
      .c-carousel { max-width: 100%; min-width: 0; overflow: hidden; }
      .contact-cta-text { font-size: 0.95rem; text-align: center; line-height: 1.4; }
      #header-contact-btn { flex-shrink: 1; min-width: 0; }
      
      /* Breadcrumbs style on mobile */
      .breadcrumb-item {
        max-width: none;
      }
      .breadcrumb-item.active {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .breadcrumb-item.truncate-middle {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      /* Better touch targets */
      button, a { -webkit-tap-highlight-color: transparent; }
      .buy-now-btn:not(.header-buy-btn) { font-size: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
    }
    .c-carousel { position: relative; max-width: 100%; min-width: 0; }
    .shop-now-btn { transition: all 0.2s cubic-bezier(0.25,0.46,0.45,0.94); }
    .shop-now-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
    .faq-answer-lead { color: #1f2937; font-size: 0.875rem; font-weight: 500; line-height: 1.65; }
    /* Hero — flat edge-to-edge on mobile; card container on desktop */
    .hero-shell { padding-left: 0; padding-right: 0; }
    .hero-card {
      background: #fff;
      border-radius: 0;
      padding: 0;
      border: none;
      box-shadow: none;
    }
    .hero-copy { padding: 1.5rem 1rem; }
    .hs-wrap-hero { border-radius: 0; box-shadow: none; }
    @media (min-width: 1024px) {
      .hero-shell { padding-left: 2rem; padding-right: 2rem; }
      .hero-card {
        border-radius: 2rem;
        padding: 3rem;
        border: 1px solid #f3f4f6;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
      }
      .hero-copy { padding: 0; }
      .hs-wrap-hero {
        border-radius: 1.5rem;
        box-shadow: none;
      }
    }
    /* Header Buy Now — compact, proportional to logo */
    .header-buy-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.375rem 0.75rem;
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      line-height: 1;
      border-radius: 9999px;
      color: #fff;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      flex-shrink: 0;
    }
    .header-buy-btn:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
    .header-buy-btn .header-buy-icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
    @media (min-width: 768px) {
      .header-buy-btn {
        gap: 0.5rem;
        padding: 0.5rem 1.125rem;
        font-size: 0.8125rem;
      }
      .header-buy-btn .header-buy-icon { width: 1rem; height: 1rem; }
    }