/* ===== Design tokens ===== */
:root{
    --monitor: var(--color-bg-header-left);
    --display: var(--color-bg-header-left-blue);
    /* Monitor (red gradient) */
    --color-bg-header-left:  #A61B1F;
    --color-bg-header-right: #D12A2F;
  
    /* Display (blue gradient, matched delta) */
    --color-bg-header-left-blue:  #0B3D91;
    --color-bg-header-right-blue: #1565C0;
      --brand: var(--monitor); /* default; swapped via [data-product] */
    
      /* 10% brighter variants for the "See a Demo" tab */
      --monitor-demo: color-mix(in oklab, var(--monitor) 90%, white 10%);
      --display-demo: color-mix(in oklab, var(--display) 90%, white 10%);
      /* default demo brand = monitor (overridden on Display pages below) */
      --demo-brand: var(--monitor-demo);
    
      /* Surfaces & text */
      --surface-1: hsl(0 0% 100%);
      --surface-2: hsl(210 20% 98%);
      --surface-3: hsl(210 16% 94%);
      --text-1: hsl(220 25% 12%);
      --text-2: hsl(220 12% 40%);
      --line:   hsl(210 16% 86%);
      --shadow-1: 0 8px 28px hsl(220 40% 2% / .16);
    
      /* Page background used to “attach” the active tab to the page */
      --page-bg: var(--surface-2);
    
      /* Tab text (keep readable regardless of glass) */
      --tab-fg-light: #111;
      --tab-fg-dark:  #fff;
    
      /* Buttons */
      --btn-bg: var(--surface-1);
      --btn-fg: var(--text-1);
      --btn-bd: var(--line);
    
      --btn-primary-bg: var(--brand);
      --btn-primary-fg: #fff;
      --btn-primary-bd: transparent;
    
      /* Rhythm */
      --radius-1: 12px; --radius-2: 18px;
      --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem; --space-5:3rem;
      --step-0: clamp(1rem, .96rem + .25vw, 1.125rem);
      --step-1: clamp(1.125rem, 1.05rem + .5vw, 1.35rem);
      --step-2: clamp(1.35rem, 1.2rem + .9vw, 1.8rem);
      --step-3: clamp(1.8rem, 1.6rem + 1.3vw, 2.4rem);
      --dur-1:120ms; --dur-2:200ms; --ease:cubic-bezier(.2,.9,.2,1);
    
      --edge-pad: clamp(16px, 5vw, 48px);
    
      /* How much of the “page sheet” overlaps tabs (for the tuck-under effect) */
      --tab-underlap-h: 14px;
    
      /* === Folder-tab vertical alignment tuning === */
      --tab-rail-h: var(--tab-underlap-h);         /* alias for readability */
      --tab-active-nudge: 10px;                    /* ↑ active tab rise (adjust here) */
      --tab-inactive-nudge: 0px;                   /* inactive tabs sit flush on the rail */
    
      /* === Gap compensation under ACTIVE tabs === */
      --rail-gap-fix: 2px;
    }
    
    /* Theme + UA color-scheme (prevent OS overrides of control colors) */
    html[data-theme="dark"]{
      color-scheme: dark;
      --surface-1:hsl(220 20% 12%);
      --surface-2:hsl(220 18% 14%);
      --surface-3:hsl(220 16% 18%);
      --text-1: hsl(210 35% 96%);
      --text-2:hsl(210 16% 70%);
      --line:hsl(220 16% 24%);
      --shadow-1: 0 10px 34px hsl(0 0% 0% / .45);
    }
    html[data-theme="light"]{ color-scheme: light; }
    @media(prefers-color-scheme:dark){
      html[data-theme="auto"]{
        color-scheme: dark;
        --surface-1:hsl(220 20% 12%);
        --surface-2:hsl(220 18% 14%);
        --surface-3:hsl(220 16% 18%);
        --text-1: hsl(210 35% 96%);
        --text-2:hsl(210 16% 70%);
        --line:hsl(220 16% 24%);
        --shadow-1: 0 10px 34px hsl(0 0% 0% / .45);
      }
    }
    
    /* Swap brand to Display on those pages; also swap the demo tint to the brighter blue */
    :root[data-product="display"]{
      --brand: var(--display);
      --demo-brand: var(--display-demo);
    }
    
    *{box-sizing:border-box}
    html{
      font-size:clamp(16px,.96rem + .25vw,18px);
      opacity:1;
      transition:opacity .3s var(--ease);
    }
    html.page-exit{ opacity:0; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--text-1);
      background: var(--surface-2);
      min-height: 100dvh;
    }
    a{ color: inherit; text-decoration: none; }
    
    /* ===== Header (two rows) ===== */
    .header{
      position: relative;
      z-index: 0;
      background: var(--brand);
      color:#fff;
      box-shadow: 0 4px 6px rgba(0,0,0,.2);
    }
    
    /* “Page sheet” that overlaps INACTIVE product tab */
    .header::after{
      content:"";
      position:absolute; left:0; right:0;
      bottom: 0;
      height: calc(var(--tab-underlap-h) + var(--rail-gap-fix));
      background: var(--page-bg);
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      pointer-events:none;
      z-index: 30; /* below active tab, above inactive tab */
      box-shadow: 0 -1px 0 hsl(0 0% 0% / .18) inset;
    }
    
    .header .topline{
      display:flex; align-items:center; justify-content:space-between;
      max-width:1200px; margin:0 auto; padding:1rem var(--space-3);
    }
    .brand{ display:flex; align-items:center; gap:.75rem }
    .brand img{ height:40px; width:40px; object-fit:contain }
    .brand h1{ margin:0; font-size:1.8rem }
    /* Product Tagline */
    .brand .tagline{
      font-size:.9rem; font-style:italic; line-height:1.2; margin:0; color:#fff; opacity:.85;
    }
    /* Login */
    .login-wrap{ padding-right: var(--edge-pad); }
    .login-wrap .btn.login{
      padding:.6rem 1.4rem; background:#fff; color:#111; border-color:#fff;
      box-shadow:0 8px 24px rgba(0,0,0,.35)
    }
    
    /* Row 2: product tabs left, actions-as-folder-tabs right */
    .header .tabline{
      max-width:1200px; margin:0 auto; padding: .25rem var(--space-3) .5rem;
      display:flex; align-items:flex-end; justify-content:space-between; gap:.75rem;
    }
    
    /* ===== Product Tabs (Monitor / Display) ===== */
    .tabs{ display:flex; gap:14px; align-items:flex-end; }
    .tab{
      position:relative;
      padding:.7rem 1rem; font-weight:900;
      border:1px solid var(--line); border-bottom:none;
      border-top-left-radius:10px; border-top-right-radius:10px;
      box-shadow:0 8px 26px rgba(0,0,0,.08);
      isolation:isolate;
    }
    /* Tab text keeps readable */
    html[data-theme="light"] .tab{ color: var(--tab-fg-light); }
    html[data-theme="dark"]  .tab{ color: var(--tab-fg-dark); }
    
    /* ACTIVE product tab (attached to page) */
    .tab.current{
      z-index: 40;
      background: color-mix(in oklab, var(--surface-1) 82%, var(--tab-brand, var(--brand)) 18%);
      border-color: color-mix(in oklab, var(--tab-brand, var(--brand)) 25%, var(--line) 75%);
      backdrop-filter: saturate(120%) blur(8px);
      transform: translateY(calc(var(--tab-active-nudge) * -1));
      margin-bottom: calc(-1 * (var(--tab-rail-h) + var(--rail-gap-fix)) - var(--tab-active-nudge));
      border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    }
    /* Seam bridge */
    .tab.current::after{
      content:""; position:absolute; left:-1px; right:-1px;
      bottom: calc(-1 * var(--rail-gap-fix)); height: calc(var(--rail-gap-fix) + 1px);
      background: var(--page-bg); pointer-events:none;
    }
    
    /* INACTIVE product tab */
    .tab.behind{
      z-index: 10;
      transform: translateY(var(--tab-inactive-nudge));
      background: color-mix(in oklab, var(--tab-brand, var(--brand)) 85%, #000 15%);
      color:#fff;
      border-color: color-mix(in oklab, var(--tab-brand, var(--brand)) 45%, var(--line) 55%);
      opacity:.98;
      box-shadow: 0 6px 20px rgba(0,0,0,.22);
    }
    .tab.behind a{ color:inherit; }
    /* Per-tab brand wires */
    .tab.monitor{ --tab-brand: var(--monitor); }
    .tab.display{ --tab-brand: var(--display); }
    
    /* ===== Right-side actions as folder tabs ===== */
    .nav-actions{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
    .nav-actions .link-btn{
      position: relative;
      display:inline-flex; align-items:center; gap:.5rem;
      padding:.5rem .85rem;
      font-weight:900;
      border:1px solid color-mix(in oklab, var(--brand) 45%, var(--line) 55%);
      border-bottom:none;
      border-top-left-radius:10px; border-top-right-radius:10px;
      background: color-mix(in oklab, var(--brand) 85%, #000 15%);
      color:#fff;
      box-shadow:0 6px 20px rgba(0,0,0,.22);
      transform: translateY(var(--tab-inactive-nudge));
      transition: filter var(--dur-2) var(--ease);
      margin: 0;
    }
    .nav-actions .link-btn:hover{ filter:brightness(1.06) }
    
    /* ACTIVE page tab */
    .nav-actions .link-btn[aria-current="page"],
    body[data-page="cover"] .nav-actions .link-btn:first-child{
      z-index: 40;
      transform: translateY(calc(var(--tab-active-nudge) * -1));
      margin-bottom: calc(-1 * (var(--tab-rail-h) + var(--rail-gap-fix)) - var(--tab-active-nudge));
      background: color-mix(in oklab, var(--surface-1) 82%, var(--brand) 18%);
      border-color: color-mix(in oklab, var(--brand) 25%, var(--line) 75%);
      backdrop-filter: saturate(120%) blur(8px);
      box-shadow:0 8px 26px rgba(0,0,0,.18);
      border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    }
    /* Seam bridge for active page tab */
    .nav-actions .link-btn[aria-current="page"]::after,
    body[data-page="cover"] .nav-actions .link-btn:first-child::after{
      content:""; position:absolute; left:-1px; right:-1px;
      bottom: calc(-1 * var(--rail-gap-fix)); height: calc(var(--rail-gap-fix) + 1px);
      background: var(--page-bg); pointer-events:none;
    }
    /* Readable labels */
    html[data-theme="light"] .nav-actions .link-btn[aria-current="page"],
    html[data-theme="light"] body[data-page="cover"] .nav-actions .link-btn:first-child{ color: var(--tab-fg-light); }
    html[data-theme="dark"] .nav-actions .link-btn[aria-current="page"],
    html[data-theme="dark"] body[data-page="cover"] .nav-actions .link-btn:first-child{ color: var(--tab-fg-dark); }
    
    /* “See a Demo” in rail */
    .nav-actions .link-btn.primary{
      background: var(--demo-brand);
      background-image: linear-gradient(180deg, hsl(0 0% 100%/.06), hsl(0 0% 0%/.10));
      color:#fff;
      border:1.5px solid #fff;
      border-bottom:none;
      backdrop-filter: blur(10px) saturate(120%);
      box-shadow:0 10px 28px rgba(0,0,0,.30);
      transform: translateY(var(--tab-inactive-nudge));
    }
    .nav-actions .link-btn.primary[aria-current="page"]{
      transform: translateY(calc(var(--tab-active-nudge) * -1));
      margin-bottom: calc(-1 * (var(--tab-rail-h) + var(--rail-gap-fix)) - var(--tab-active-nudge));
      background: var(--demo-brand);
      background-image: linear-gradient(180deg, hsl(0 0% 100%/.08), hsl(0 0% 0%/.08));
      color:#fff;
      border:1.5px solid #fff;
      border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    }
    .nav-actions .link-btn.primary:hover{
      filter:none;
      background: color-mix(in oklab, var(--demo-brand) 90%, white 10%);
    }
    
    /* ===== Hero ===== */
    .hero{
      background:#333; color:#fff; text-align:center; padding:3rem 1rem;
      box-shadow: inset 0 -1px 0 var(--line);
    }
    .hero .inner{max-width:900px;margin:0 auto}
    .hero h2{font-size:2.5rem;margin:0 0 .5rem 0}
    .hero p{font-size:1.15rem;margin:.5rem auto;max-width:780px;opacity:.95}
    .cta-row{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
    
    /* ===== Content ===== */
    .section{max-width:1200px;margin:0 auto;padding:2.5rem 1rem}
    .section h3{color:var(--brand);font-size:2rem;margin:0 0 .75rem 0}
    .cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit, minmax(260px,1fr))}
    .card{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-1);box-shadow:var(--shadow-1);padding:1rem;color:var(--text-1)}
    .muted{color:var(--text-2);font-size:.95rem}
    
    /* ===== Generic buttons ===== */
    .btn{
      display:inline-flex;align-items:center;gap:.5rem;
      padding:.6rem 1rem;border-radius:10px;font-weight:800;
      border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg);
    }
    .btn.primary{ background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: var(--btn-primary-bd) }
    .btn:hover{ filter:brightness(1.04) }
    
    /* ===== Contact glass chip ===== */
    .contact{
      position:fixed; right:18px; bottom:16px; z-index:50;
      display:inline-flex; align-items:center; gap:8px;
      padding:10px 12px; border-radius:12px;
      border:1px solid rgba(255,255,255,.35);
      background:rgba(0,0,0,.25); color: var(--text-1);
      text-decoration:none; backdrop-filter:blur(8px);
      font-weight:700;
    }
    .contact svg{ width:18px; height:18px }
    
    /* ===== Theme switch ===== */
    .theme-chip{
      position:fixed; left:18px; bottom:16px; z-index:50;
      display:flex; align-items:center; gap:.75rem;
      padding:.6rem .75rem; border-radius:12px;
      background:hsl(0 0% 100% / .06);
      border:1px solid hsl(0 0% 100% / .18);
      color:inherit; font-weight:800;
      backdrop-filter: blur(8px);
    }
    .toggle{position:relative;inline-size:52px;block-size:28px;border-radius:999px;background:hsl(0 0% 100% / .25);border:1px solid hsl(0 0% 100% / .35)}
    .knob{position:absolute;top:50%;left:4px;translate:0 -50%;inline-size:20px;block-size:20px;border-radius:50%;background:#fff;box-shadow:0 4px 12px hsl(0 0% 0% / .35);transition:left var(--dur-2) var(--ease)}
    html[data-theme="light"] .toggle{background:hsl(0 0% 0% / .3);border-color:hsl(0 0% 0% / .3)}
    html[data-theme="light"] .knob{left:28px}
    
    /* ===== A11y / motion ===== */
    @media (prefers-reduced-motion: reduce){
      *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
    }
    
    /* === Product tab label colors (LIGHT MODE) === */
    html[data-theme="light"] .tabs .tab.current { color: #111; }
    html[data-theme="light"] .tabs .tab.current a { color: inherit; }
    html[data-theme="light"] .tabs .tab.behind { color: #fff; }
    html[data-theme="light"] .tabs .tab.behind a { color: inherit; }
    
    /* =================================================================
       GLOBAL defaults for injected MOBILE UI so it never shows on desktop
       ================================================================= */
    .mnav-trigger{ display:none; } /* hidden by default */
    .mnav-backdrop{
      position:fixed; inset:0; background:transparent; opacity:0; pointer-events:none; z-index:1000;
    }
    .mnav-drawer{
      position:fixed; top:0; bottom:0; left:0;
      inline-size:min(88vw, 420px);
      transform:translateX(-102%);
      display:flex; flex-direction:column;
      background:var(--surface-1); color:var(--text-1);
      z-index:1001;
    }
    
    /* =================================================================
       MOBILE UI (≤ 840px)
       ================================================================= */
    @media (max-width: 840px){
    
      /* Hide desktop rail; show Row‑2 trigger */
      .header .tabline{ display:none !important; }
      .mnav-trigger{ display:flex !important; }
    
      /* === Header rows (mobile) === */
      .header .topline{
        display:flex;
        flex-wrap: wrap;
        align-items:center;
        gap:.5rem;
        padding: .65rem clamp(12px, 4vw, 18px);
      }
      /* Row 1: brand (show product name) + Login */
      .brand h1{
        display:block !important;
        font-size: clamp(1.1rem, 4.3vw, 1.35rem);
        line-height: 1.1;
      }
      .brand .tagline{ display:none !important; }
      .header .topline .brand{ order:1; flex:1 1 auto; min-width:0; }
      .header .topline .login-wrap{ order:2; flex:0 0 auto; }
    
      /* Row 2: centered burger + big “See a Demo” chip */
      .mnav-trigger{
        order:3;
        flex: 1 0 100%;
        justify-content: center;
        gap:.65rem;
        margin-top:.25rem;
      }
      .mnav-open{
        display:inline-flex; align-items:center; justify-content:center;
        inline-size:44px; block-size:44px; border-radius:12px;
        border:1px solid hsl(0 0% 100% / .35);
        background:hsl(0 0% 100% / .10); color:#fff; font-weight:900;
      }
      .mnav-open .bars{ position:relative; inline-size:20px; block-size:2px; background:currentColor; }
      .mnav-open .bars::before,
      .mnav-open .bars::after{ content:""; position:absolute; left:0; inline-size:20px; block-size:2px; background:currentColor; }
      .mnav-open .bars::before{ top:-6px; } .mnav-open .bars::after{ top:6px; }
    
      .demo-chip{
        display:inline-flex; align-items:center; justify-content:center;
        border-radius:12px; padding:.65rem 1rem; font-size:1rem;
        border:1.5px solid #fff; background: var(--demo-brand); color:#fff;
        font-weight:900; 
        text-decoration:none; box-shadow:0 8px 26px rgba(0,0,0,.30);
        /* ~50–60% width on mobile, centered by the flex container */
        flex: 0 0 clamp(200px, 60%, 360px);
        margin-bottom:1.25rem;   /* 👈 optional, extra button spacing */
      }
      .demo-chip:hover{ filter:none; background: color-mix(in oklab, var(--demo-brand) 90%, white 10%); }
    
      /* Backdrop + Drawer animations (mobile only) */
      .mnav-backdrop{ background:hsl(0 0% 0% / .45); transition: opacity var(--dur-2) var(--ease); }
      .mnav-drawer{
        box-shadow:0 18px 60px hsl(0 0% 0% / .32);
        transition:transform 260ms var(--ease);
      }
      body.mnav-open .mnav-backdrop{ opacity:1; pointer-events:auto; }
      body.mnav-open .mnav-drawer{ transform:none; }
      body.mnav-open{ overflow:hidden; }
    
      /* Drawer header: centered title, neutral color (white/black via theme) */
      .mnav-header{
        position:relative; display:flex; align-items:center; justify-content:center;
        text-align:center; padding:14px 48px;
        background: var(--surface-2); border-bottom: 1px solid var(--line);
      }
      .mnav-title{ font-weight:900; color: var(--text-1) !important; letter-spacing:.2px; }
      .mnav-close{
        position:absolute; top:8px; right:10px;
        inline-size:40px; block-size:40px; border-radius:12px;
        border:1px solid var(--line); background:var(--surface-1);
        font-size:20px; font-weight:900; line-height:1;
      }
    
      /* Quick links: vertical stack, comfortable spacing */
      .mnav-quick{
        display:flex; flex-direction:column; gap:12px;
        padding:12px 14px 0;
      }
      .mnav-quick a{
        display:flex; align-items:center; justify-content:center;
        width:100%;
        padding:.9rem 1.1rem; border-radius:12px;
        font-weight:900; text-align:center;
        border:1px solid var(--line);
        background:var(--surface-1); color:var(--text-1);
      }
      .mnav-quick a[aria-current="page"]{
        background: color-mix(in oklab, var(--surface-1) 82%, var(--brand) 18%);
        border-color: color-mix(in oklab, var(--brand) 25%, var(--line) 75%);
      }
    
      /* Drawer “See a Demo” (full-width insider) */
      .mnav-demo{
        margin: 12px 14px 0;
        display:flex; align-items:center; justify-content:center;
        padding:.95rem 1.1rem; border-radius:12px; font-weight:900;
        background: var(--demo-brand); color:#fff; border:1.5px solid #fff;
        text-decoration:none;
      }
    
      /* Footer: one centered other-product button */
      .mnav-foot{
        margin-top:auto; padding:14px 14px 16px; text-align:center;
        border-top:1px dashed var(--line);
        background: color-mix(in oklab, var(--surface-1) 96%, var(--brand) 4%);
      }
      .mnav-note{ display:block; margin:0 0 .6rem 0; font-weight:800; font-size:.96rem; }
      .mnav-switch{
        display:inline-flex; align-items:center; justify-content:center;
        padding:.75rem 2.2rem; border-radius:5px; font-weight:900;
        border:1px solid var(--line); background:var(--surface-1); color:var(--text-1);
      }
    
      /* If any legacy build injected tabs up top, hide them in the new layout */
      .mnav-tabs{ display:none !important; }
    
      /* Floating chips smaller; reserve bottom padding to avoid overlap */
      .theme-chip, .contact{ transform:scale(.92); transform-origin:bottom; padding:.45rem .55rem; }
      .theme-chip{ left:12px; bottom:12px; gap:.55rem; }
      .contact{ right:12px; bottom:12px; }
      .section:last-of-type, .hero:last-of-type{ padding-bottom: max(2.5rem, 76px + env(safe-area-inset-bottom)); }
    
      @media (prefers-reduced-motion: reduce){
        .mnav-drawer{ transition:none; } .mnav-backdrop{ transition:none; }
      }
    }
    html[data-product="monitor"] .mnav-switch{
      background: var(--display);
      color: #fff;
      border: 1.5px solid #fff;
    }
    
    html[data-product="display"] .mnav-switch{
      background: var(--monitor);
      color: #fff;
      border: 1.5px solid #fff;
    }
    
    .mnav-switch:hover{
      filter: brightness(1.1);
    }
    html[data-product="monitor"] .header {
      background: linear-gradient(to right, var(--color-bg-header-left), var(--color-bg-header-right));
    }
    
    html[data-product="display"] .header {
      background: linear-gradient(to right, var(--color-bg-header-left-blue), var(--color-bg-header-right-blue));
    }