:root{
  --denim:#1184C2; /* primary */
  --denim-2:#1184C2; /* 2% opacity used as bg tint via rgba in classes */
  --white:#FFFFFF;
  --dove:#666666; /* gray 40 */
  --pale-sky:#6C757D; /* gray 46 */
  --outer-space:#343A40; /* footer bg */
  --athens:#F8FAFC; /* light text in footer heading */
  --border:#e6eef5;
  --shadow:0 2px 10px rgba(0,0,0,.05);
  --radius:8px;
  --container:1280px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Roboto,system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;color:#333}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 16px}

/* Announcement */
.announce{background:rgba(62,156,206,.26);color:#231f20;text-align:center;font-size:14px;padding:8px 0}

/* Header */
.site-header{position:sticky;top:0;background:#fff;box-shadow:var(--shadow);z-index:20}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.header-wrapper{display:flex;align-items:center;gap:48px}
.brand img{height:63px;width:auto}
.main-nav{display:flex;gap:36px;align-items:center;color:var(--dove)}
.main-nav a{color:var(--dove);text-decoration:none;font-weight:500;letter-spacing:.3px;font-size:16px;line-height:24.32px;font-family:Roboto,sans-serif}
.main-nav .is-active{color:#000}
.main-nav .divider{width:1px;height:20px;background:#ced4da;display:inline-block}
.header-actions{display:flex;gap:24px}
.icon-btn{background:transparent;border:0;color:var(--dove);font-size:18px;cursor:pointer;padding:0}

/* Hero */
.hero{position:relative;height:250px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-image:url('http://localhost:3845/assets/d7f3e8efe1f8fdfdfda015c7677d99aa9043ca91.png');background-size:cover;background-position:center;}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(17,132,194,.6) 7.2%, rgba(248,249,250,.6) 75.5%)}
.hero .container{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
.hero-title{font-size:69.188px;line-height:86.4px;color:#fff;text-shadow:2px 2px 0 #000;margin:0;font-weight:500;text-align:center}

/* Layout */
.layout{display:grid;grid-template-columns:270px 1fr;gap:20px;margin:48px auto}

.content{display:flex;flex-direction:column;gap:24px;align-items:stretch;width:100%}

/* Sidebar */
.sidebar{position:relative}
/* Sidebar component library */
.sb{background:#fff;border:1px solid rgba(17,132,194,.1);border-radius:8px;overflow:hidden;font-size:16px;line-height:25.6px;font-weight:700;color:#333}
.sb-head{display:flex;align-items:center;gap:8px;padding:20px;border-bottom:1px solid var(--border);font-weight:700}
.sb-row{display:flex;align-items:center;padding:20px;border-bottom:1px solid var(--border);color:#333;text-decoration:none;font-weight:700;cursor:pointer;background:#fff}
.sb-row span{flex:1}
.sb-row:hover{background:#f5f9fc}
.sb-row--active{background:linear-gradient(90deg,#1c83c5,#42a5f5);color:#fff;border-left:4px solid #0d5c8a;padding-left:16px}
.sb-row--active .sb-caret{color:#fff}
.sb-subrow{display:block;padding:20px 20px 20px 32px;border-bottom:1px solid var(--border);color:#333;text-decoration:none;font-weight:700}
.sb-subrow:hover{background:#f8fbfd}
.sb-subrow--active{background:linear-gradient(90deg,#1c83c5,#42a5f5);color:#fff;font-weight:700;position:relative}
.sb-subrow--active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#0d5c8a}
.sb-icon{flex:0 0 20px;height:20px;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:17.6px;color:#333}
.sb-head .sb-icon{margin-right:0}
.sb-caret{font-size:13px;color:#333;margin-left:12px;flex:0 0 20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.sb [aria-disabled="true"]{cursor:not-allowed;opacity:.85}
.sb-row.is-disabled{cursor:not-allowed;opacity:.85}

/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:8px;padding:4px;border-radius:12px}
.breadcrumb a{color:var(--denim);text-decoration:none;font-weight:700}
.breadcrumb span{font-weight:700}

/* Section intro */
.section-intro{display:flex;flex-direction:column;align-items:center;gap:24px;padding:12px 0;width:100%}
.section-title{font-size:40px;color:var(--denim);margin:0;font-weight:700;line-height:normal;font-family:Helvetica,sans-serif}
.section-lead{color:#555;font-size:20px;max-width:990px;margin:0;text-align:center;line-height:normal;font-family:Helvetica,sans-serif}

/* Mechanism Section */
.mechanism-section{display:flex;flex-direction:column;gap:12px;width:100%;margin-bottom:24px}
.mechanism-content{display:grid;grid-template-columns:578px 400px;gap:12px;align-items:start}
.mechanism-text{display:flex;flex-direction:column;gap:24px;padding-left:4px}
.mechanism-text h3{margin:0;font-size:24px;line-height:36px;color:var(--denim);font-weight:700;font-family:Helvetica,sans-serif}
.mechanism-text p{margin:0;font-size:16px;line-height:24px;color:#555;font-family:Helvetica,sans-serif}
.mechanism-media{margin:0;background:#fff;border:1px solid #fff;border-radius:8px;display:flex;align-items:center;justify-content:center;height:300px;width:400px;padding:0;box-shadow:none}
.mechanism-media img{max-height:171px;width:auto;border-radius:0;box-shadow:none}

/* Split section - CRISPR Container (node 1133:6404) */
.split{display:flex;flex-direction:column;gap:12px;width:100%}
.split-title{width:100%;display:flex;align-items:center;justify-content:flex-start;height:36px;border-bottom:1px solid #d5dee7;margin:0}
.split-title h3{margin:0;font-size:24px;line-height:36.4px;color:var(--denim);font-weight:700}
.split-content{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:12px;align-items:start}
.split-text{display:flex;flex-direction:column;gap:24px;color:#555;line-height:24px;padding-left:4px}
.split-text p{margin:0;font-size:16px;line-height:24px;color:#555}
.split-media{margin:0;background:#fff;border:1px solid #fff;border-radius:8px;display:flex;align-items:center;justify-content:center;height:300px;width:400px;padding:4px;box-shadow:none}
.split-media img{height:100%;width:auto;border-radius:8px;box-shadow:none}

/* Tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.tile{display:flex;flex-direction:column;gap:8px;min-height:113px;background:rgba(17,132,194,.02);border-radius:4px;box-shadow:0 0 8px rgba(0,0,0,.1);padding:24px;text-align:center}
.tile h4{margin:0;color:var(--denim);font-size:20px;line-height:26px}
.tile p{margin:0;color:#555;font-size:14px}

/* CTA */
.cta-band{background:#878c90;color:#fff;padding:48px 0}
.cta-inner{display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center}
.cta-text h3{margin:0 0 8px;font-size:32px}
.cta-text p{margin:0;font-size:20px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:10px;text-decoration:none}
.btn-primary{background:#fff;color:var(--denim);border:2px solid #fff}

/* Footer */
.site-footer{background:var(--outer-space);border-top:2px solid #000;color:var(--pale-sky);padding:18px 0 16px}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.footer-logo{height:75px;width:auto;margin-bottom:8px}
.footer-heading{margin:0 0 8px;color:var(--athens);font-size:16px}
.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.footer-links li{font-size:12.8px;line-height:20.48px}
.footer-links.meta i{margin-right:6px}

/* Design-system SVG icons from Figma (22px canvas, primary #1184C2) */
.ds-icon{display:inline-block;width:22px;height:22px;background-repeat:no-repeat;background-position:center;background-size:contain;vertical-align:middle}
.ds-icon--brain{background-image:url('http://localhost:3845/assets/b952c67b0ea85c386ad272a061f6e77c33813a40.svg')}
.ds-icon--pills{background-image:url('http://localhost:3845/assets/14496d5939189a442e7fdaae715fa59f232d1a35.svg')}
.ds-icon--gear{background-image:url('http://localhost:3845/assets/e6f9c38d8dc17eefb164105e48385647557000b5.svg')}

/* Feature Section */
.feature-section{display:flex;flex-direction:column;gap:12px;width:100%;margin-bottom:24px}
.feature-section-title{margin:0;color:var(--denim);font-size:24px;line-height:normal;font-weight:700;font-family:Helvetica,sans-serif}
.features-two-col{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

/* Feature Cards */
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px;margin-top: 12px;}
.feature-card{background:#fff;border-radius:4px;box-shadow:0 0 4px rgba(0,0,0,.08);padding:16px;display:flex;flex-direction:column;gap:12px}
.feature-header{display:flex;align-items:center;gap:4px}
.feature-header i{font-size:22px;color:var(--denim)}
.feature-header h3{font-size:20px;color:var(--denim);margin:0;font-family:Helvetica,sans-serif;font-weight:700;line-height:normal}
.feature-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
.feature-list li{display:flex;align-items:center;gap:4px;padding:4px 0;height:28px}
.feature-list i{font-size:20px;width:20px;height:20px;color:#28a745;flex-shrink:0}
.feature-list span{font-size:16px;color:#555;font-family:Helvetica,sans-serif;line-height:normal}

/* Intro Card */
.intro-card{background:#fff;border-radius:8px;box-shadow:0 0 4px rgba(0,0,0,.1);padding:16px}

/* Card Header Styles */
.card-header{display:flex;gap:4px;align-items:center;margin-bottom:12px;padding: unset;margin-bottom: unset;background-color: unset;border-bottom: unset;}
.card-header i{color:#1184c2;font-size:22px}
.card-header h3{color:#1184c2;font-size:24px;margin:0;font-family:Helvetica,sans-serif;font-weight:bold}
.card-header-small h3{font-size:20px}

/* Intro Card Layout */
.intro-card-layout{display:flex;gap:24px;align-items:flex-start;width:100%}
.intro-card-layout-compact{display:flex;gap:16px;align-items:flex-start;width:100%}
.intro-card-content{flex:1;padding:12px;display:flex;flex-direction:column;gap:10px}
.intro-card-content-large{flex:1;padding:16px;display:flex;flex-direction:column;gap:16px}
.intro-card-image{width:300px;height:300px;border:1px solid white;border-radius:8px;padding:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.intro-card-image-small{width:258px;height:258px}
.intro-card-image-xs{width:240px;height:240px}
.intro-card-image img{max-width:100%;height:auto}

/* Text Styles */
.intro-text{color:#555555;font-size:16px;line-height:20px;margin:0;font-family:Helvetica,sans-serif}
.highlight-text{color:#555555;font-size:20px;line-height:normal;margin:0;font-family:Helvetica,sans-serif}
.card-title-large{color:#1184c2;font-size:24px;margin:0;font-family:Helvetica,sans-serif;font-weight:bold}

/* Application Box */
.application-box{background:#fff;border-radius:4px;box-shadow:0 0 4px rgba(0,0,0,.08);padding:12px;margin-bottom:24px;display:flex;flex-direction:column;gap:8px}
.application-header{display:flex;align-items:center;gap:4px}
.application-header i{font-size:22px;color:var(--denim)}
.application-header h3{font-size:24px;color:var(--denim);margin:0;font-family:Helvetica,sans-serif;font-weight:700;line-height:normal}
.application-subtitle{font-size:20px;color:#555;margin:0;padding:0 8px;font-family:Helvetica,sans-serif;line-height:normal}
.application-inner{background:#fff;border-radius:4px;box-shadow:0 0 4px rgba(0,0,0,.08);padding:8px;display:flex;flex-direction:column;gap:21px}
.application-section{display:flex;flex-direction:column;gap:8px}
.application-section-header{display:flex;align-items:center;gap:4px;height:24px}
.application-section-header i{font-size:22px;color:var(--denim);width:22px;height:22px;flex-shrink:0}
.application-section-header h4{margin:0;font-size:20px;color:var(--denim);font-family:Helvetica,sans-serif;font-weight:700;line-height:24px}
.application-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
.application-list li{display:flex;align-items:center;gap:4px;padding:4px 0;height:28px}
.application-list i{font-size:20px;width:20px;height:20px;color:#28a745;flex-shrink:0}
.application-list span{font-size:16px;color:#555;font-family:Helvetica,sans-serif;line-height:normal}

/* Download Button */
.download-btn{display:inline-block;border:1.5px solid var(--denim);color:var(--denim);padding:4px 8px;border-radius:4px;font-size:16px;font-family:Helvetica,sans-serif;font-weight:700;text-decoration:none;line-height:24px;margin-top:12px}
.download-btn:hover{background:var(--denim);color:#fff}

/* Accessibility focus styles */
a:focus-visible, button:focus-visible, select:focus-visible{outline:2px solid var(--denim);outline-offset:2px}

/* Utility for reversed split (image right / text left vs default) */
.split.reverse .split-content{grid-template-columns:400px minmax(0,1fr)}
.split.reverse .split-content figure{order:1}
.split.reverse .split-content .split-text{order:2}

/* Product List */
.product-list{background:#fff;display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.product-list-header{display:flex;align-items:center;gap:8px}
.product-list-header i{font-size:24px;color:var(--denim)}
.product-list-header h2{font-size:28px;color:var(--denim);margin:0;font-family:Roboto,sans-serif;font-weight:600;line-height:36.4px}
.product-filters{display:flex;flex-direction:column;gap:16px}
.filter-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.filter-group{display:flex;flex-direction:column;gap:4px}
.filter-group label{font-size:16px;color:#555;font-family:Helvetica,sans-serif;text-align:center;line-height:24px}
.filter-group select{width:180px;height:32px;padding:4px 10px;border:1px solid #e0e0e0;border-radius:4px;font-size:14px;color:#555;background:#fff;font-family:Helvetica,sans-serif;line-height:24px}
.filter-search{width:200px;height:32px;padding:4px 8px;border:1px solid #e0e0e0;border-radius:4px;display:flex;align-items:center;gap:10px;background:#fff}
.filter-search i{font-size:16px;color:#b8b8b8}
.filter-buttons{display:flex;gap:12px}
.btn-reset{padding:8px 16px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;color:var(--denim);font-size:16px;font-family:Helvetica,sans-serif;line-height:24px;cursor:pointer}
.btn-search{padding:8px 16px;border:none;border-radius:4px;background:var(--denim);color:#fff;font-size:16px;font-family:Helvetica,sans-serif;line-height:24px;cursor:pointer;display:flex;align-items:center;gap:4px}
.btn-search i{font-size:16px}
.product-table{border:1px solid rgba(17,132,194,.1);border-radius:8px;overflow:hidden;background:#fff}
.product-table table{width:100%;border-collapse:collapse;table-layout:fixed}
.product-table thead{background:var(--denim)}
.product-table th{padding:17px 8px;text-align:left;font-size:14px;color:#fff;font-family:Helvetica,sans-serif;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.1);vertical-align:middle}
.product-table th button{all:unset;display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:inherit;font:inherit;line-height:16px}
.product-table th .sort-icon{font-size:12px;color:#fff;opacity:.9}
.product-table th:nth-child(1){width:105px;text-align:center}
.product-table th:nth-child(2){width:auto;text-align:left;padding-left:8px}
.product-table th:nth-child(3){width:170px;text-align:left;padding-left:8px}
.product-table th:nth-child(4){width:100px;text-align:left;padding-left:8px}
.product-table th:nth-child(5){width:70px;text-align:center}
.product-table td:nth-child(1){width:105px;text-align:center}
.product-table td:nth-child(2){width:auto;text-align:left;padding-left:8px}
.product-table td:nth-child(3){width:170px;text-align:left;padding-left:8px}
.product-table td:nth-child(4){width:100px;text-align:left;padding-left:8px}
.product-table td:nth-child(5){width:70px;text-align:center}
.product-table tbody tr{height:40px;border-bottom:none}
.product-table tbody tr.alt{background:rgba(17,132,194,.1)}
.product-table td{padding:8px;font-size:14px;color:var(--dove);font-family:Helvetica,sans-serif;vertical-align:middle}
.product-table td a{color:var(--denim);text-decoration:none;font-weight:700}
.product-table td a:hover{text-decoration:underline}
.product-table td.price{color:#28a745;font-weight:700;line-height:23px}
.product-table td i{font-size:16px;color:var(--denim);cursor:pointer}

/* Responsive */
@media (max-width: 1024px){
  .layout{grid-template-columns:1fr}
  .sidebar{order:2}
  .content{order:1}
  .split-content{grid-template-columns:1fr}
  .split-media{width:100%;max-width:400px;margin:0 auto}
  .mechanism-content{grid-template-columns:1fr;max-width:578px}
  .mechanism-media{width:100%;max-width:400px;margin:0 auto}
  .footer-grid{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:1fr}
  .features-two-col{grid-template-columns:1fr}
}
/* Feature Boxes */
.feature-boxes{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;margin-bottom:24px}
.feature-box{background:#fff;border-radius:4px;box-shadow:0 0 8px rgba(0,0,0,.1);padding:16px;display:flex;flex-direction:column;gap:12px}
.feature-box h4{margin:0;font-size:20px;color:var(--denim);font-family:Helvetica,sans-serif;font-weight:700;line-height:23px;display:flex;align-items:center;gap:4px}
.feature-box h4 i{font-size:22px}
.feature-box .feature-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
.feature-box .feature-list li{display:flex;align-items:center;gap:4px;padding:4px 0;height:28px}
.feature-box .feature-list i{font-size:20px;width:20px;height:20px;color:#28a745;flex-shrink:0}

/* Stats Cards */
.stats-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;margin-top:24px}
.stat-card{background:rgba(17,132,194,.02);border-radius:4px;box-shadow:0 0 8px rgba(0,0,0,.1);padding:24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-height:113px}
.stat-card .stat-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--denim);color:#fff;border-radius:50%;font-size:20px}
.stat-card h5{margin:0;font-size:20px;color:var(--denim);font-family:Helvetica,sans-serif;font-weight:700;line-height:26px}
.stat-card p{margin:0;font-size:14px;color:#555;font-family:Helvetica,sans-serif}

@media (max-width: 1024px){
  .layout{grid-template-columns:1fr}
  .sidebar{order:2}
  .content{order:1}
  .split-content{grid-template-columns:1fr}
  .split-media{width:100%;max-width:400px;margin:0 auto}
  .mechanism-content{grid-template-columns:1fr;max-width:578px}
  .mechanism-media{width:100%;max-width:400px;margin:0 auto}
  .footer-grid{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:1fr}
  .features-two-col{grid-template-columns:1fr}
  .feature-boxes{grid-template-columns:1fr}
  .stats-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .main-nav{display:none}
  .header-inner{height:auto;padding:12px 0;gap:12px}
  .hero-title{font-size:40px;line-height:52px}
  .tiles{justify-content:center}
  .footer-grid{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .features-two-col{grid-template-columns:1fr}
  .filter-row{flex-direction:column;align-items:stretch}
  .filter-group select,.filter-search{width:100%}
  .feature-boxes{grid-template-columns:1fr}
  .stats-cards{grid-template-columns:1fr}
}

