:root{
      --bg0:#171A3A; --bg1:#2A3168;
      --text:#F1F2FA; --muted:#D0D2EA; --muted2:#AEB2D6;
      --line:rgba(255,255,255,.14);
      --accent:#4B79FF; --accent2:#FF8A2A;
      --good:#39E6B0;
      --shadow: 0 20px 60px rgba(10,14,38,.38);
      --shadow2: 0 14px 40px rgba(10,14,38,.28);
      --radius: 18px; --radius2: 14px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:var(--sans);
      color:var(--text);
      /* Orange + Blueberry "aurora" — not too white, not too black */
      background:
        radial-gradient(1200px 700px at 14% 6%, rgba(75,121,255,.30), transparent 58%),
        radial-gradient(980px 620px at 78% 12%, rgba(255,138,42,.22), transparent 62%),
        radial-gradient(900px 700px at 52% 112%, rgba(57,230,176,.10), transparent 62%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      overflow-x:hidden;
    }
    a{color:inherit; text-decoration:none}
    a:hover{color:var(--accent)}

    .wrap{width:min(1120px, calc(100% - 40px)); margin:0 auto; padding:28px 0 80px;}

    /* Top bar */
    .top{
      display:flex; align-items:center; justify-content:space-between; gap:18px;
      padding:18px 18px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(10,18,38,.55);
      backdrop-filter: blur(10px);
      box-shadow: var(--shadow2);
      position:sticky; top:14px; z-index:50;
    }

    .brand{display:flex; align-items:center; gap:12px; min-width: 240px;}
    .brand h1{margin:0; font-size:15px; letter-spacing:.3px; line-height:1.1;}
    .brand .sub{margin:3px 0 0; color:var(--muted); font-size:12px;}

    .nav{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; flex:1 1 auto;}
    .tab{
      border:1px solid transparent; background:transparent; color:var(--muted);
      padding:10px 12px; border-radius:14px; cursor:pointer;
      font-weight:600; letter-spacing:.25px;
      transition: all .18s ease; position:relative; outline:none;
    }
    .tab:hover{color:var(--text); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08);}
    .tab[aria-selected="true"]{
      color:var(--text);
      background:rgba(75,121,255,.10);
      border-color:rgba(75,121,255,.20);
    }
    .tab[aria-selected="true"]::after{
      content:""; position:absolute; left:10px; right:10px; bottom:6px;
      height:2px; border-radius:10px;
      background:linear-gradient(90deg, var(--accent), var(--accent2));
      opacity:.95;
    }

    .cta{display:flex; align-items:center; gap:10px; min-width:240px; justify-content:flex-end;}
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:9px 12px; border-radius:999px;
      border:1px solid var(--line);
      color:var(--muted);
      background:rgba(255,255,255,.03);
      font-size:12px; white-space:nowrap;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px; /* Reduce gap between icon and text */
      padding: 8px 10px; /* Smaller padding */
      font-size: 9px; /* Smaller font size */
      border-radius: 12px; /* Optional: You can adjust the border radius as well */
      border: 1px solid rgba(75, 121, 255, 0.25); /* Existing border style */
      background: linear-gradient(180deg, rgba(75, 121, 255, 0.18), rgba(75, 121, 255, 0.08));
      color: var(--text); /* Text color */
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
      white-space: nowrap;
    }
    
    .btn:hover{transform: translateY(-1px); border-color: rgba(75,121,255,.45); background:linear-gradient(180deg, rgba(75,121,255,.26), rgba(75,121,255,.10));}
    .btn:active{transform: translateY(0px)}
    .btn svg{opacity:.9}

    /* Panels */
    .panel{
      margin-top:18px;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(14,22,48,.62), rgba(10,18,38,.48));
      box-shadow:var(--shadow2);
      overflow:hidden;
    }
    .panelHeader{
      padding:18px 20px;
      border-bottom:1px solid var(--line);
      display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
    }
    .panelHeader h2{margin:0; font-size:16px; letter-spacing:.2px;}
    .panelHeader p{margin:0; color:var(--muted); font-size:13px; line-height:1.4;}
    .panelBody{padding:18px 20px 22px;}

    .grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:14px;}
    .card{
      grid-column: span 6;
      padding:16px 16px;
      border-radius:var(--radius2);
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      transition: transform .15s ease, border-color .15s ease;
    }
    .card:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.18);}
    .card h3{margin:0 0 8px; font-size:14px; letter-spacing:.2px;}
    .card p{margin:0; color:var(--muted); font-size:13px; line-height:1.55;}
    .list{margin:10px 0 0; padding:0 0 0 16px; color:var(--muted); font-size:13px; line-height:1.55;}
    .list li{margin:7px 0}
    .split{display:grid; grid-template-columns: 1fr 1fr; gap:14px;}

    .code{
      margin-top:12px; padding:12px 12px; border-radius:14px;
      border:1px solid var(--line);
      background:rgba(0,0,0,.22);
      font-family:var(--mono); font-size:12px;
      color:rgba(234,240,255,.88);

      /* key changes */
      white-space: pre-wrap;       /* preserves formatting but allows wrapping */
      word-break: break-all;       /* breaks long FIX tag streams */
      overflow: hidden;            /* no scrollbars */
    }

    .feature-image {
      width: 100%;
      height: 200px;        /* pick a consistent height */
      object-fit: contain;  /* keep full image visible */
      display: block;
      margin: 0 auto;
    }

    .lightbox-thumb{cursor: zoom-in;}

    /* Lightbox */
    .lightbox{position:fixed; inset:0; display:none; z-index:2000;}
    .lightbox[data-open="true"]{display:block;}
    .lightbox__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.6);}
    .lightbox__content{
      position:relative;
      width:min(1100px, calc(100% - 28px));
      margin: 44px auto;
      border-radius: var(--radius);
      border:1px solid var(--line);
      background: rgba(10,18,38,.92);
      box-shadow: var(--shadow);
      padding: 14px;
    }
    .lightbox__close{
      position:absolute; top:8px; right:10px;
      width:36px; height:36px;
      border-radius: 12px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.06);
      color: var(--text);
      font-size: 20px;
      cursor: pointer;
    }
    .lightbox__close:hover{background: rgba(255,255,255,.10);}
    .lightbox__img{
      width:100%;
      height: min(78vh, 720px);
      object-fit: contain;
      display:block;
      margin: 0 auto;
    }

    .contactGrid{display:grid; grid-template-columns: 1fr 1fr; gap:14px; align-items:start;}
    .field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px;}
    label{font-size:12px; color:var(--muted); letter-spacing:.25px;}
    input, textarea{
      width:100%;
      border-radius:14px; border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      padding:12px 12px;
      color:var(--text);
      outline:none; font-family:var(--sans); font-size:13px;
      transition:border-color .15s ease;
    }
    input:focus, textarea:focus{border-color: rgba(75,121,255,.45)}
    textarea{min-height:140px; resize:vertical}

    .note{color:var(--muted); font-size:13px; line-height:1.6; margin:0;}
    .fine{color:var(--muted2); font-size:12px; line-height:1.55; margin-top:10px;}
    .footer{margin-top:18px; color:var(--muted2); font-size:12px; text-align:center; padding-top:16px;}

    [role="tabpanel"]{display:none}
    [role="tabpanel"][data-active="true"]{display:block}

    @media (max-width: 920px){
      .cta{min-width:auto}
      .brand{min-width:auto}
      .card{grid-column: span 12}
      .contactGrid{grid-template-columns:1fr}
      .split{grid-template-columns:1fr}
    }
  

    /* Mobile header + tabs: stack nicely, scroll tabs horizontally */
    @media (max-width: 720px){
      .wrap{
        width: min(1120px, calc(100% - 24px));
        padding: 18px 0 56px;
      }

      .top{
        flex-wrap: wrap;
        align-items: stretch;
        gap: 10px;
        padding: 12px 12px;
        top: 10px;
      }

      /* Put brand, then tabs, then CTA in a clean vertical stack */
      .brand{ min-width: 0; flex: 1 1 auto; }
      .brand h1{ font-size: 15px; }
      .brand .sub{ font-size: 12px; }

      .nav{
        order: 3;
        flex: 1 1 100%;
        justify-content: flex-start;

        /* horizontal tab scroller */
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        padding: 2px 2px 6px;
      }
      .nav::-webkit-scrollbar{ display: none; }

      .tab{
        flex: 0 0 auto;
        padding: 9px 10px;
        border-radius: 12px;
        font-size: 12px;
        letter-spacing: .2px;
      }
      .tab[aria-selected="true"]::after{
        left: 8px; right: 8px; bottom: 5px;
      }

      .cta{
        order: 2;
        min-width: 0;
        justify-content: flex-end;
        gap: 8px;
      }
      .btn{
        padding: 10px 10px;
        border-radius: 12px;
      }

      /* Panels: tighten spacing a touch */
      .panelHeader{ padding: 14px 14px; }
      .panelBody{ padding: 14px 14px 18px; }

      .grid{ gap: 12px; }
      .card{ padding: 14px 14px; }

      /* Feature images: reduce fixed height on narrow screens */
      .feature-image{
        height: 120px;
      }
    }
    
    .bench-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 8px;
}

.bench-meta p {
  margin: 0 0 6px 0;
}

.feature-download a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.feature-download a:hover {
  text-decoration: underline;
}