/* ==========================================================================
   Funnel-specific styles for the DB Studio site.
   Layered on top of styles.css; reuses CSS variables (--primary etc).
   ========================================================================== */

/* ===== Nav CTA pill ===== */
.main-nav .nav-cta {
    background: var(--primary);
    color: #fff !important;
    padding: 6px 16px;
    border-radius: 999px;
    font-weight: 600;
    transition: var(--transition);
    font-size: 13px;
}
.main-nav .nav-cta:hover {
    background: var(--primary-dark);
}
.main-nav .nav-cta::after { display: none; }

.mobile-menu .nav-cta {
    background: var(--primary);
    color: #fff !important;
    padding: 10px 18px;
    border-radius: 999px;
    text-align: center;
    font-weight: 600;
}

/* ===== Hero meta ===== */
.hero-meta {
    margin-top: 18px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.4px;
}

/* ===== Trust strip ===== */
.trust-strip {
    padding: 36px 0;
    background: var(--grey-light);
    border-top: 1px solid var(--grey-medium);
    border-bottom: 1px solid var(--grey-medium);
}
.trust-strip-label {
    text-align: center;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-light);
    margin-bottom: 18px;
}
.trust-strip-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px 36px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.trust-strip-list li {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-medium);
    letter-spacing: 0.3px;
}

/* ===== Section header lead ===== */
.section-lead {
    max-width: 720px;
    margin: 16px auto 0;
    font-size: 18px;
    color: var(--text-medium);
    line-height: 1.6;
}

/* ===== Problem section ===== */
.problem-section {
    padding: 96px 0;
}
.problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 48px;
}
.problem-card {
    background: #fff;
    border: 1px solid var(--grey-medium);
    border-radius: 12px;
    padding: 36px 32px;
    box-shadow: var(--shadow-sm);
}
.problem-card h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-light);
    margin-bottom: 20px;
    font-weight: 700;
}
.problem-card-highlight {
    background: var(--gradient-primary);
    border: none;
    color: #fff;
    box-shadow: var(--shadow-lg);
}
.problem-card-highlight h3 {
    color: rgba(255, 255, 255, 0.85);
}
.problem-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.problem-list li {
    padding: 10px 0 10px 28px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    font-size: 16px;
    line-height: 1.5;
}
.problem-card-highlight .problem-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.problem-list li:last-child { border-bottom: none; }
.problem-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    width: 16px;
    height: 2px;
    background: var(--text-light);
}
.problem-card-highlight .problem-list li::before {
    background: rgba(255, 255, 255, 0.7);
}

/* ===== Pillar sections ===== */
.pillar-section {
    padding: 96px 0;
}
.pillar-section-alt {
    background: var(--grey-light);
}
.pillar-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.pillar-row-reverse .pillar-content { order: 2; }
.pillar-row-reverse .pillar-image { order: 1; }
.pillar-tag {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 16px;
}
.pillar-content h2 {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 700;
}
.pillar-content p {
    font-size: 17px;
    color: var(--text-medium);
    margin-bottom: 24px;
    line-height: 1.7;
}
.pillar-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
}
.pillar-bullets li {
    padding: 8px 0 8px 28px;
    position: relative;
    font-size: 16px;
    color: var(--text-medium);
}
.pillar-bullets li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 700;
    font-size: 18px;
}
.pillar-link {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
    border-bottom: 1px solid transparent;
    transition: var(--transition);
}
.pillar-link:hover {
    border-bottom-color: var(--primary);
}
.pillar-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
    border: none;
}

/* ===== Fleet of One ===== */
.fleet-section {
    padding: 96px 0;
}
.fleet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.fleet-card {
    background: #fff;
    border: 1px solid var(--grey-medium);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.fleet-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.fleet-number {
    font-size: 48px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}
.fleet-card h4 {
    font-size: 18px;
    margin-bottom: 12px;
    font-weight: 700;
    color: var(--text-dark);
}
.fleet-card p {
    font-size: 15px;
    color: var(--text-medium);
    line-height: 1.6;
}

/* ===== Pricing ===== */
.pricing-teaser {
    padding: 96px 0;
    background: var(--grey-light);
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
    align-items: stretch;
}
.pricing-card {
    background: #fff;
    border: 1px solid var(--grey-medium);
    border-radius: 12px;
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.pricing-card:hover {
    box-shadow: var(--shadow-md);
}
.pricing-card-featured {
    border-color: var(--primary);
    border-width: 2px;
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
}
.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.pricing-card h3 {
    font-size: 22px;
    margin-bottom: 8px;
    font-weight: 700;
}
.pricing-price {
    margin: 16px 0 8px;
}
.pricing-amount {
    font-size: 42px;
    font-weight: 800;
    color: var(--text-dark);
}
.pricing-period {
    font-size: 14px;
    color: var(--text-light);
    margin-left: 4px;
}
.pricing-tagline {
    font-size: 14px;
    color: var(--text-medium);
    margin-bottom: 24px;
    min-height: 42px;
}
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    flex-grow: 1;
}
.pricing-features li {
    padding: 8px 0 8px 24px;
    position: relative;
    font-size: 14px;
    color: var(--text-medium);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 700;
}
.pricing-card .btn {
    width: 100%;
    text-align: center;
}
.pricing-footnote {
    text-align: center;
    margin-top: 32px;
    font-size: 14px;
    color: var(--text-light);
}
.pricing-footnote a {
    color: var(--primary);
    text-decoration: none;
}

/* ===== Trial signup ===== */
.trial-page {
    padding: 60px 0 96px;
}
.trial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
    margin-top: 32px;
}
.trial-pitch h2 {
    font-size: 32px;
    margin-bottom: 16px;
    line-height: 1.2;
}
.trial-pitch p {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.7;
    margin-bottom: 20px;
}
.trial-pitch ul {
    list-style: none;
    padding: 0;
}
.trial-pitch ul li {
    padding: 10px 0 10px 28px;
    position: relative;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.82);
}
.trial-pitch ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 700;
    font-size: 16px;
}
.trial-form-card {
    background: #fff;
    border: 1px solid var(--grey-medium);
    border-radius: 12px;
    padding: 36px;
    box-shadow: var(--shadow-md);
}
.trial-form-card h3 {
    font-size: 22px;
    margin-bottom: 8px;
}
.trial-form-card .form-meta {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 24px;
}
.trial-form-card .form-group {
    margin-bottom: 18px;
}
.trial-form-card label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-medium);
}
.trial-form-card input,
.trial-form-card select,
.trial-form-card textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--grey-medium);
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    transition: var(--transition);
}
.trial-form-card input:focus,
.trial-form-card select:focus,
.trial-form-card textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(53, 117, 242, 0.15);
}
.trial-form-card .btn {
    width: 100%;
    margin-top: 8px;
}
.trial-form-card .form-fineprint {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 16px;
    line-height: 1.5;
}
.trial-form-card .form-fineprint a {
    color: var(--primary);
    text-decoration: none;
}
.trial-success {
    background: #ecf6ff;
    border: 1px solid var(--primary-light);
    color: var(--primary-dark);
    padding: 16px 18px;
    border-radius: 8px;
    margin-bottom: 18px;
    display: none;
    font-size: 14px;
    line-height: 1.5;
}
.trial-success.is-visible { display: block; }

/* ===== Pricing comparison table ===== */
.compare-section {
    padding: 96px 0;
}
.compare-table-wrapper {
    overflow-x: auto;
    margin-top: 40px;
    border-radius: 12px;
    border: 1px solid var(--grey-medium);
    box-shadow: var(--shadow-sm);
}
.compare-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    min-width: 720px;
}
.compare-table th,
.compare-table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--grey-medium);
    font-size: 14px;
}
.compare-table thead th {
    background: var(--grey-light);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-medium);
}
.compare-table thead th.featured {
    background: var(--gradient-primary);
    color: #fff;
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody td.feature-name {
    font-weight: 600;
    color: var(--text-dark);
}
.compare-table .check {
    color: var(--primary);
    font-weight: 700;
    font-size: 18px;
}
.compare-table .dash {
    color: var(--grey-dark);
}
.compare-table .col-tier {
    text-align: center;
    width: 18%;
}

/* ===== FAQ ===== */
.faq-section {
    padding: 96px 0;
    background: var(--grey-light);
}
.faq-list {
    max-width: 820px;
    margin: 48px auto 0;
}
.faq-item {
    background: #fff;
    border: 1px solid var(--grey-medium);
    border-radius: 10px;
    margin-bottom: 14px;
    overflow: hidden;
}
.faq-item summary {
    padding: 18px 22px;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    list-style: none;
    position: relative;
    transition: var(--transition);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: var(--primary);
    font-weight: 300;
    transition: var(--transition);
}
.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}
.faq-item summary:hover { background: var(--grey-light); }
.faq-item .faq-body {
    padding: 0 22px 18px;
    color: var(--text-medium);
    font-size: 15px;
    line-height: 1.7;
}

/* ===== Hero variant: solid gradient bg, no video (used on products.html) =====
   Vertical dark-navy gradient (dark at top, deep blue at bottom) with a
   subtle brand-blue glow in the bottom-right for visual energy. */
.hero.hero-static {
    min-height: 55vh;
    background:
        radial-gradient(ellipse at 75% 100%, rgba(53, 117, 242, 0.30) 0%, transparent 55%),
        linear-gradient(180deg, #050d1f 0%, #0a1f3d 60%, #11305c 100%);
}
.hero.hero-static .hero-video-overlay,
.hero.hero-static .hero-video-background { display: none; }

/* ===== Company-front sections (homepage only) ===== */
.company-hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding-top: 110px;
    padding-bottom: 60px;
}
.company-hero-content {
    max-width: 760px;
}
.company-hero-content .pillar-tag {
    margin-bottom: 12px;
}
.company-hero-title {
    font-size: 48px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}
.company-hero-subtitle {
    font-size: 19px;
    line-height: 1.6;
    color: var(--text-medium);
    margin-bottom: 32px;
}
.company-hero .hero-buttons .btn-secondary {
    background: transparent;
    color: var(--text-dark);
    border: 1px solid var(--grey-dark);
}
.company-hero .hero-buttons .btn-secondary:hover {
    border-color: var(--text-dark);
}

.company-mission {
    padding: 48px 0 72px;
}
.company-mission-grid {
    max-width: 820px;
    margin: 0 auto;
}
.company-mission-text h2 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--text-light);
    margin-bottom: 20px;
    font-weight: 700;
}
.company-mission-text p {
    font-size: 22px;
    line-height: 1.6;
    color: var(--text-dark);
    font-weight: 400;
}

.featured-product {
    padding: 80px 0;
    background: var(--grey-light);
}
.featured-product-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.featured-product-content h2 {
    font-size: 36px;
    margin-bottom: 16px;
    line-height: 1.2;
    font-weight: 700;
}
.featured-product-content p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-medium);
    margin-bottom: 28px;
}
.featured-product-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.featured-product-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--grey-medium);
}

.company-about-teaser {
    padding: 80px 0;
}
.company-about-teaser-content {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.company-about-teaser-content h2 {
    font-size: 32px;
    line-height: 1.25;
    margin-bottom: 18px;
    font-weight: 700;
}
.company-about-teaser-content p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-medium);
    margin-bottom: 22px;
}

/* ===== Mobile ===== */
@media (max-width: 900px) {
    .company-hero-title { font-size: 34px; }
    .company-hero-subtitle { font-size: 17px; }
    .company-mission-text p { font-size: 18px; }
    .featured-product-row { grid-template-columns: 1fr; gap: 32px; }
    .featured-product-content h2 { font-size: 28px; }
    .company-about-teaser-content h2 { font-size: 26px; }
    .problem-grid,
    .pillar-row,
    .fleet-grid,
    .pricing-grid,
    .trial-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .pillar-row { gap: 32px; }
    .pillar-row-reverse .pillar-content { order: 1; }
    .pillar-row-reverse .pillar-image { order: 2; }
    .pricing-card-featured { transform: none; }
    .pillar-content h2 { font-size: 28px; }
    .main-nav { display: none; }
    .hamburger { display: flex; }
}

/* ==========================================================================
   Layout refresh - logo grid, diff comparison, code surfaces, cinematic
   pillar, hero polish. Added 2026-05-18.
   ========================================================================== */

/* ----- Database logo grid (replaces text trust-strip-list) ----- */
.db-logo-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    background: var(--grey-light);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--grey-medium);
}
.db-logo-cell {
    aspect-ratio: 1.5 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: #fff;
    border-right: 1px solid var(--grey-medium);
    border-bottom: 1px solid var(--grey-medium);
    transition: var(--transition);
}
.db-logo-cell:nth-child(8n) { border-right: none; }
.db-logo-cell:nth-last-child(-n+8) { border-bottom: none; }
.db-logo-cell img {
    max-width: 100%;
    max-height: 38px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.72;
    transition: var(--transition);
}
.db-logo-cell .db-logo-name {
    font-size: 10px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0;
    transition: var(--transition);
    line-height: 1;
}
.db-logo-cell:hover {
    background: #fafbfd;
    box-shadow: inset 0 -2px 0 var(--primary);
}
.db-logo-cell:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.06);
}
.db-logo-cell:hover .db-logo-name { opacity: 1; }
@media (max-width: 1100px) {
    .db-logo-grid { grid-template-columns: repeat(4, 1fr); }
    .db-logo-cell { border-right: 1px solid var(--grey-medium); border-bottom: 1px solid var(--grey-medium); }
    .db-logo-cell:nth-child(4n) { border-right: none; }
    .db-logo-cell:nth-last-child(-n+4) { border-bottom: none; }
}
@media (max-width: 600px) {
    .db-logo-grid { grid-template-columns: repeat(3, 1fr); }
    .db-logo-cell { border-right: 1px solid var(--grey-medium); border-bottom: 1px solid var(--grey-medium); aspect-ratio: 1.2 / 1; }
    .db-logo-cell:nth-child(3n) { border-right: none; }
    .db-logo-cell:nth-last-child(-n+3) { border-bottom: none; }
}

/* ----- Diff-styled comparison (replaces text problem-grid cards) ----- */
.diff-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 48px;
    background: #0d1117;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #21262d;
    box-shadow: var(--shadow-lg);
    font-family: 'SF Mono', 'JetBrains Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
}
.diff-pane { min-width: 0; }
.diff-pane-old { background: #1a0e10; border-right: 1px solid #2a1414; }
.diff-pane-new { background: #0e1a12; }
.diff-pane-header {
    padding: 14px 22px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
}
.diff-pane-old .diff-pane-header { color: #ff7b72; background: rgba(248, 81, 73, 0.05); }
.diff-pane-new .diff-pane-header { color: #7ee787; background: rgba(46, 160, 67, 0.06); }
.diff-pane-marker {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 800;
    font-family: 'SF Mono', monospace;
}
.diff-pane-old .diff-pane-marker { background: rgba(248, 81, 73, 0.2); color: #ff7b72; }
.diff-pane-new .diff-pane-marker { background: rgba(46, 160, 67, 0.22); color: #7ee787; }
.diff-lines {
    list-style: none;
    margin: 0;
    padding: 14px 0;
}
.diff-lines li {
    padding: 9px 22px 9px 44px;
    font-size: 14.5px;
    line-height: 1.5;
    position: relative;
}
.diff-pane-old .diff-lines li {
    color: #d9b6b8;
    background: rgba(248, 81, 73, 0.06);
    text-decoration: line-through;
    text-decoration-color: rgba(248, 81, 73, 0.5);
    text-decoration-thickness: 1px;
}
.diff-pane-new .diff-lines li {
    color: #c4e3c8;
    background: rgba(46, 160, 67, 0.06);
}
.diff-lines li::before {
    position: absolute;
    left: 22px;
    font-weight: 700;
    width: 12px;
    text-align: center;
}
.diff-pane-old .diff-lines li::before { content: '-'; color: #ff7b72; }
.diff-pane-new .diff-lines li::before { content: '+'; color: #7ee787; }
@media (max-width: 900px) {
    .diff-comparison { grid-template-columns: 1fr; }
    .diff-pane-old { border-right: none; border-bottom: 1px solid #2a1414; }
}

/* ----- Code surface (terminal/editor chrome) ----- */
.code-surface {
    background: #0d1117;
    border-radius: 12px;
    border: 1px solid #21262d;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    font-family: 'SF Mono', 'JetBrains Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
}
.code-surface-chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #161b22;
    border-bottom: 1px solid #21262d;
}
.code-surface-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #30363d;
}
.code-surface-dot.red    { background: #ff5f56; }
.code-surface-dot.yellow { background: #febc2e; }
.code-surface-dot.green  { background: #27c93f; }
.code-surface-filename {
    margin-left: 12px;
    color: #8b949e;
    font-size: 13px;
    font-family: 'SF Mono', monospace;
}
.code-surface-tab {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    color: #8b949e;
    background: rgba(255, 255, 255, 0.04);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.code-surface-body {
    display: flex;
    align-items: stretch;
}
.code-surface-gutter {
    user-select: none;
    padding: 18px 12px 18px 18px;
    color: #484f58;
    font-size: 13.5px;
    text-align: right;
    background: #0d1117;
    border-right: 1px solid #21262d;
    line-height: 1.7;
    font-family: 'SF Mono', monospace;
}
.code-surface-gutter span { display: block; }
.code-surface-code {
    flex: 1;
    padding: 18px 22px;
    overflow-x: auto;
    color: #c9d1d9;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre;
    margin: 0;
    font-family: 'SF Mono', 'JetBrains Mono', monospace;
}
.code-surface-code .tok-kw  { color: #ff7b72; }
.code-surface-code .tok-str { color: #a5d6ff; }
.code-surface-code .tok-num { color: #79c0ff; }
.code-surface-code .tok-fn  { color: #d2a8ff; }
.code-surface-code .tok-com { color: #8b949e; font-style: italic; }
.code-surface-code .tok-id  { color: #79c0ff; }
.code-surface-code .tok-key { color: #7ee787; }
.code-surface-code .tok-op  { color: #ff7b72; }

/* ----- Pillar image as a vertical stack (text left, image+code right) ----- */
.pillar-image-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.pillar-image-stack > img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
    border: none;
}

/* ----- Cinematic full-bleed pillar (replaces 2-col Change Manager) ----- */
.pillar-cinematic {
    padding: clamp(80px, 10vw, 120px) 0 clamp(64px, 8vw, 96px);
    background:
        radial-gradient(ellipse at 20% 0%, rgba(53, 117, 242, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(26, 75, 168, 0.22) 0%, transparent 55%),
        linear-gradient(180deg, #000000 0%, #000000 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.pillar-cinematic::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.pillar-cinematic .container { position: relative; z-index: 1; }
.pillar-cinematic-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}
.pillar-cinematic-head .pillar-tag { color: #79c0ff; }
.pillar-cinematic-head h2 {
    font-size: clamp(1.75rem, 1rem + 2.2vw, 2.75rem);
    line-height: 1.15;
    margin-bottom: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
}
.pillar-cinematic-head p {
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.65;
}
.pillar-cinematic-stage {
    max-width: 880px;
    margin: 0 auto 56px;
}
.pillar-cinematic-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}
.pillar-cinematic-feature {
    padding: 32px 28px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pillar-cinematic-feature:nth-child(3n) { border-right: none; }
.pillar-cinematic-feature:nth-last-child(-n+3) { border-bottom: none; }
.pillar-cinematic-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(53, 117, 242, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: #79c0ff;
    font-weight: 700;
    font-size: 17px;
    font-family: 'SF Mono', monospace;
}
.pillar-cinematic-feature h4 {
    font-size: 16px;
    color: #fff;
    margin-bottom: 8px;
    font-weight: 700;
}
.pillar-cinematic-feature p {
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}
@media (max-width: 900px) {
    .pillar-cinematic { padding: 80px 0 64px; }
    .pillar-cinematic-features { grid-template-columns: 1fr; }
    .pillar-cinematic-feature { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
    .pillar-cinematic-feature:last-child { border-bottom: none; }
    .pillar-cinematic-head h2 { font-size: 32px; }
}

/* ----- Hero polish: grid backdrop + sequential reveal ----- */
.hero.hero-static {
    position: relative;
}
.hero.hero-static::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at 60% 50%, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse at 60% 50%, #000 25%, transparent 75%);
    z-index: 1;
}
.hero.hero-static > .container { z-index: 2; }

@keyframes seqReveal {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero.hero-static .hero-title,
.hero.hero-static .hero-subtitle,
.hero.hero-static .hero-buttons,
.hero.hero-static .hero-meta {
    opacity: 0;
    animation: seqReveal 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.hero.hero-static .hero-title    { animation-delay: 0.05s; }
.hero.hero-static .hero-subtitle { animation-delay: 0.20s; }
.hero.hero-static .hero-buttons  { animation-delay: 0.35s; }
.hero.hero-static .hero-meta     { animation-delay: 0.50s; }

/* Homepage video hero: visible grid overlay on top of the video */
.hero .hero-video-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 75%);
}
/* Homepage hero: sequential reveal too */
.hero .hero-content .hero-title,
.hero .hero-content .hero-subtitle,
.hero .hero-content .hero-buttons {
    animation-fill-mode: both;
}

/* ----- Featured product (homepage): cinematic dark variant ----- */
.featured-product.featured-product-cinematic {
    padding: 110px 0 96px;
    background:
        radial-gradient(ellipse at 15% 0%, rgba(53, 117, 242, 0.20) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(26, 75, 168, 0.24) 0%, transparent 55%),
        linear-gradient(180deg, #000000 0%, #000000 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.featured-product-cinematic::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.featured-product-cinematic .container { position: relative; z-index: 1; }
.featured-product-cinematic .featured-product-row {
    grid-template-columns: 5fr 7fr;
    gap: 56px;
}
.featured-product-cinematic .pillar-tag { color: #79c0ff; }
.featured-product-cinematic .featured-product-content h2 {
    color: #fff;
    font-size: 42px;
    letter-spacing: -0.5px;
}
.featured-product-cinematic .featured-product-content p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 17.5px;
}
.featured-product-cinematic .featured-product-content p strong {
    color: #fff;
}
.featured-product-cinematic .btn-outline {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    background: transparent;
}
.featured-product-cinematic .btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: #fff;
}
.featured-product-cinematic .featured-product-image {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.featured-product-cinematic .featured-product-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
    border: none;
}
@media (max-width: 900px) {
    .featured-product.featured-product-cinematic { padding: 72px 0 64px; }
    .featured-product-cinematic .featured-product-row { grid-template-columns: 1fr; gap: 32px; }
    .featured-product-cinematic .featured-product-content h2 { font-size: 30px; }
}

/* ==========================================================================
   Homepage redesign - bigger type, generous spacing, blended sections,
   ambient motion. 2026-05-18 second pass.
   ========================================================================== */

/* ----- Ambient motion on the body atmosphere ----- */
@keyframes atmosphereDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
    50%  { transform: translate3d(-2%, -3%, 0) scale(1.04); opacity: 0.85; }
    100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}
body::before {
    animation: atmosphereDrift 22s ease-in-out infinite;
}

/* ----- Hero: bigger, bolder, slower ----- */
.hero { min-height: 92vh; }
.hero .hero-title {
    font-size: 92px;
    line-height: 0.98;
    letter-spacing: -3.5px;
    font-weight: 700;
    max-width: 13ch;
}
.hero .hero-subtitle {
    font-size: 26px;
    line-height: 1.45;
    font-weight: 300;
    max-width: 620px;
    margin-bottom: 52px;
}

/* Homepage hero sequential reveal */
.hero .hero-title,
.hero .hero-subtitle,
.hero .hero-buttons {
    opacity: 0;
    animation: seqReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero .hero-title    { animation-delay: 0.10s; }
.hero .hero-subtitle { animation-delay: 0.28s; }
.hero .hero-buttons  { animation-delay: 0.46s; }

/* ----- Mission: huge, light, calm ----- */
.company-mission {
    padding: clamp(72px, 9vw, 160px) 0 clamp(56px, 7vw, 120px);
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(53, 117, 242, 0.05) 18%,
            rgba(53, 117, 242, 0.09) 50%,
            rgba(53, 117, 242, 0.05) 82%,
            rgba(255, 255, 255, 0) 100%);
}
.company-mission::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 15% 30%, rgba(53, 117, 242, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 70%, rgba(26, 75, 168, 0.14) 0%, transparent 55%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
    animation: cinematicGlow 18s ease-in-out infinite;
}
.company-mission .container { position: relative; z-index: 1; }
.company-mission-grid { max-width: 960px; }
.company-mission-text h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--primary);
    margin-bottom: 32px;
    font-weight: 700;
}
.company-mission-text p {
    font-size: clamp(1.125rem, 0.6rem + 1.1vw, 1.625rem);
    line-height: 1.5;
    color: var(--text-dark);
    font-weight: 400;
    letter-spacing: -0.3px;
}

/* ----- Featured product cinematic: blended edges, bigger typography ----- */
.featured-product.featured-product-cinematic {
    padding: clamp(80px, 10vw, 160px) 0 clamp(72px, 9vw, 140px);
    margin: 0;
}
.featured-product-cinematic::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0) 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
}
/* Transparent → dark navy → transparent so adjacent sections show through */
.featured-product-cinematic {
    background:
        linear-gradient(180deg,
            rgba(6, 14, 34, 0) 0%,
            rgba(6, 14, 34, 0.45) 8%,
            rgba(6, 14, 34, 0.95) 18%,
            rgba(6, 14, 34, 1) 32%,
            rgba(10, 23, 51, 1) 68%,
            rgba(10, 23, 51, 0.95) 82%,
            rgba(10, 23, 51, 0.45) 92%,
            rgba(10, 23, 51, 0) 100%),
        radial-gradient(ellipse at 15% 0%, rgba(53, 117, 242, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(26, 75, 168, 0.22) 0%, transparent 55%);
}
.featured-product-cinematic .featured-product-content h2 {
    font-size: clamp(2rem, 1rem + 3vw, 4rem);
    line-height: 1.04;
    letter-spacing: -1.5px;
    margin-bottom: 24px;
}
.featured-product-cinematic .featured-product-content p {
    font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.1875rem);
    line-height: 1.65;
    margin-bottom: 32px;
    max-width: 480px;
}
.featured-product-cinematic .pillar-tag {
    font-size: 12px;
    letter-spacing: 2.5px;
    margin-bottom: 24px;
    display: inline-block;
}

/* Ambient glow drift inside the cinematic section */
@keyframes cinematicGlow {
    0%, 100% { opacity: 0.7; transform: translate3d(0, 0, 0); }
    50%      { opacity: 1;   transform: translate3d(2%, -1%, 0); }
}
.featured-product-cinematic::before {
    animation: cinematicGlow 14s ease-in-out infinite;
}

/* ----- About teaser: bigger statement ----- */
.company-about-teaser {
    padding: clamp(80px, 10vw, 160px) 0 clamp(72px, 9vw, 140px);
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(53, 117, 242, 0.06) 18%,
            rgba(53, 117, 242, 0.10) 50%,
            rgba(53, 117, 242, 0.06) 82%,
            rgba(255, 255, 255, 0) 100%);
}
.company-about-teaser::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 80% 30%, rgba(53, 117, 242, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 75%, rgba(26, 75, 168, 0.14) 0%, transparent 55%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    animation: cinematicGlow 22s ease-in-out infinite reverse;
}
.company-about-teaser .container { position: relative; z-index: 1; }
.company-about-teaser-content { max-width: 880px; }
.company-about-teaser-content h2 {
    font-size: clamp(1.875rem, 1rem + 2.4vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -1.2px;
    margin-bottom: 24px;
    font-weight: 700;
}
.company-about-teaser-content p {
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
    line-height: 1.65;
    margin-bottom: 28px;
}
.company-about-teaser .pillar-link {
    font-size: 17px;
    letter-spacing: 0.3px;
}

/* ----- CTA: matched to the Currently Shipping (featured-product-cinematic) bg ----- */
.cta-section {
    padding: clamp(72px, 9vw, 140px) 0;
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(180deg,
            rgba(6, 14, 34, 0) 0%,
            rgba(6, 14, 34, 0.45) 8%,
            rgba(6, 14, 34, 0.95) 18%,
            rgba(6, 14, 34, 1) 32%,
            rgba(10, 23, 51, 1) 68%,
            rgba(10, 23, 51, 0.95) 82%,
            rgba(10, 23, 51, 0.45) 92%,
            rgba(10, 23, 51, 0) 100%),
        radial-gradient(ellipse at 15% 0%, rgba(53, 117, 242, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(26, 75, 168, 0.22) 0%, transparent 55%);
}
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
            mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    animation: cinematicGlow 14s ease-in-out infinite;
}
.cta-section .container { position: relative; z-index: 1; }
.cta-section .cta-content h2 {
    font-size: clamp(2rem, 1rem + 3vw, 4rem);
    letter-spacing: -1.5px;
    line-height: 1.05;
    margin-bottom: 24px;
}
.cta-section .cta-content p {
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
    margin-bottom: 36px;
}

/* ----- Section reveal: softer cascade ----- */
.fade-in-up,
.fade-in-left,
.fade-in-right,
.fade-in {
    transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----- Mobile guardrails for generic heroes (products.html static hero).
   Hero-blend has its own clamp()-based rules later in source and wins by
   source-order against same-specificity selectors. ----- */
@media (max-width: 900px) {
    .hero .hero-title { font-size: 44px; letter-spacing: -1.5px; }
    .hero .hero-subtitle { font-size: 18px; }
}

/* ==========================================================================
   Display font + split hero. 2026-05-18 third pass.
   ========================================================================== */

/* Apply Space Grotesk to all display headings. Body stays Inter. */
.hero-title,
.company-mission-text p,
.featured-product-content h2,
.company-about-teaser-content h2,
.cta-content h2,
.section-header h2,
.pillar-content h2,
.pillar-cinematic-head h2,
.page-hero h1,
.page-hero-video h1,
.company-hero-title,
.product-hero-content h2,
.featured-product-content h2 {
    font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-feature-settings: 'ss01', 'ss02';
}

/* ----- Hero blend: contained video on right, feathered into the page ----- */
.hero.hero-blend {
    min-height: 78vh;
    padding-top: 90px;
    padding-bottom: 40px;
    background: transparent;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
}
.hero.hero-blend > .container {
    position: relative;
    z-index: 2;
    width: 100%;
}
.hero-blend-video {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 62%;
    height: 78%;
    z-index: 1;
    pointer-events: none;
    /* Feather the left edge into the page bg + softer top/bottom edges */
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, #000 32%, #000 100%),
        linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
        linear-gradient(to right, transparent 0%, #000 32%, #000 100%),
        linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
            mask-composite: intersect;
    overflow: hidden;
}
.hero-blend-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Soft brand tint laid over the video, fading out toward the feathered edge */
.hero-blend-video::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(53, 117, 242, 0.18) 40%,
        rgba(10, 20, 40, 0.18) 100%
    );
}
.hero.hero-blend .hero-content {
    max-width: 560px;
    padding: 60px 0;
    text-align: left;
    position: relative;
    z-index: 3;
}
.hero.hero-blend .hero-title {
    font-size: clamp(2rem, 1rem + 2.7vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: -1.8px;
    color: var(--text-dark);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
    margin-bottom: 22px;
    font-weight: 700;
}
.hero.hero-blend .hero-subtitle {
    font-size: clamp(1rem, 0.85rem + 0.5vw, 1.1875rem);
    line-height: 1.55;
    color: var(--text-medium);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
    font-weight: 400;
    margin-bottom: 32px;
    max-width: 100%;
}
.hero.hero-blend .hero-buttons .btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 10px 28px rgba(53, 117, 242, 0.28);
}
.hero.hero-blend .hero-buttons .btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 14px 36px rgba(53, 117, 242, 0.4);
}
.hero.hero-blend .hero-buttons .btn-secondary {
    background: transparent;
    color: var(--text-dark);
    border: 2px solid var(--text-dark);
    padding: 14px 38px;
}
.hero.hero-blend .hero-buttons .btn-secondary:hover {
    background: var(--text-dark);
    color: #fff;
}
/* ==========================================================================
   Layout-only media queries. Typography & padding are handled by clamp()
   on the base rules - no font-size overrides here.
   ========================================================================== */

/* Hero-blend stacks below 1024px (iPad + small laptops): text first, video below */
@media (max-width: 1024px) {
    .hero.hero-blend { min-height: auto; }
    .hero-blend-video {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: 100%;
        height: clamp(240px, 38vw, 380px);
        margin-top: 24px;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
                mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    }
    .hero.hero-blend .hero-content { padding: 24px 0; max-width: 100%; }

    /* Featured product (homepage) - stack at tablet */
    .featured-product-cinematic .featured-product-row { grid-template-columns: 1fr; gap: 36px; }
    .featured-product-cinematic .featured-product-content p { max-width: 100%; }

    /* Change Manager cinematic features - 2-col at tablet */
    .pillar-cinematic-features { grid-template-columns: repeat(2, 1fr); }
    .pillar-cinematic-feature {
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .pillar-cinematic-feature:nth-child(3n) { border-right: 1px solid rgba(255, 255, 255, 0.08); }
    .pillar-cinematic-feature:nth-child(2n) { border-right: none; }
    .pillar-cinematic-feature:nth-last-child(-n+3) { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
    .pillar-cinematic-feature:nth-last-child(-n+2) { border-bottom: none; }

    /* IDE pillar - stack at tablet (text above image/code) */
    .pillar-row { grid-template-columns: 1fr; gap: 40px; }
    .pillar-row-reverse .pillar-content { order: 1; }
    .pillar-row-reverse .pillar-image { order: 2; }

    /* Fleet grid stays 3-col but tighter */
    .fleet-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .fleet-card { padding: 24px 18px; }

    /* Code surface readability on tablet */
    .code-surface-gutter { padding: 16px 8px 16px 12px; font-size: 12.5px; }
    .code-surface-code { padding: 16px 18px; font-size: 13px; }
}

/* ----- Stack to 1-col at tablet portrait / phone (max 768) ----- */
@media (max-width: 768px) {
    .pillar-cinematic-features { grid-template-columns: 1fr; }
    .pillar-cinematic-feature { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
    .pillar-cinematic-feature:last-child { border-bottom: none; }
    .pillar-cinematic-stage { margin-bottom: 40px; }

    .diff-comparison { grid-template-columns: 1fr; }
    .diff-pane-old { border-right: none; border-bottom: 1px solid #2a1414; }
    .diff-lines li { padding: 8px 18px 8px 38px; }

    .fleet-grid { grid-template-columns: 1fr; }

    .code-surface-chrome { padding: 10px 12px; }
    .code-surface-filename { font-size: 12px; margin-left: 8px; }
    .code-surface-tab { display: none; }
    .code-surface-gutter { padding: 14px 6px 14px 10px; font-size: 12px; }
    .code-surface-code { padding: 14px 14px; font-size: 12.5px; line-height: 1.65; }

    .container { padding: 0 20px; }
}

/* ----- Very small phones (layout-only, no font sizes) ----- */
@media (max-width: 420px) {
    .container { padding: 0 16px; }
    .hero.hero-blend .hero-buttons { gap: 10px; }
    .hero.hero-blend .hero-buttons .btn { padding: 12px 22px; font-size: 13px; }
    .code-surface-code { padding: 12px 12px; }
    .code-surface-gutter { padding: 12px 4px 12px 8px; }
}

/* ==========================================================================
   Homepage unified canvas - single continuous gradient + atmospheric blobs
   live on the body itself, NOT per section. Sections are fully transparent
   pass-through containers. 2026-05-20.
   ========================================================================== */
body {
    background:
        /* Atmospheric brand-blue blobs distributed along page height.
           These scroll with the page so accents flow continuously across
           every section, no dead zones at section boundaries. */
        radial-gradient(ellipse 55% 22% at 78% 8%,  rgba(53, 117, 242, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 48% 18% at 18% 22%, rgba(53, 117, 242, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 60% 24% at 88% 38%, rgba(26, 75, 168, 0.24) 0%, transparent 55%),
        radial-gradient(ellipse 52% 22% at 12% 54%, rgba(53, 117, 242, 0.20) 0%, transparent 55%),
        radial-gradient(ellipse 58% 24% at 82% 70%, rgba(53, 117, 242, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 48% 20% at 22% 86%, rgba(26, 75, 168, 0.18) 0%, transparent 55%),
        /* Base vertical gradient - now pure BLACK; the brand-blue blobs above
           and the body::before atmospheric layer still provide all the glow effects. */
        linear-gradient(180deg,
            #000000 0%,
            #000000 100%);
    color: #e6edf7;
}

/* Body's fixed-viewport atmospheric layer adds subtle motion */
body::before {
    background:
        radial-gradient(ellipse 120% 80% at 80% 20%, rgba(53, 117, 242, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse 100% 70% at 20% 60%, rgba(53, 117, 242, 0.14) 0%, transparent 50%),
        radial-gradient(ellipse 90% 60% at 90% 80%, rgba(53, 117, 242, 0.12) 0%, transparent 50%);
    filter: blur(120px);
    z-index: 0;
}

/* Every section truly transparent - no bg, no ::before atmospheric overlay.
   Body provides all visuals. */
body .hero,
body .company-mission,
body .featured-product,
body .featured-product.featured-product-cinematic,
body .company-about-teaser,
body .cta-section {
    background: transparent !important;
    overflow: visible;
}
body .company-mission::before,
body .featured-product-cinematic::before,
body .company-about-teaser::before,
body .cta-section::before {
    display: none !important;
}

/* Hero on homepage - text becomes light to read on dark canvas */
body .hero.hero-blend .hero-title {
    color: #ffffff;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
body .hero.hero-blend .hero-subtitle {
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.3);
}
body .hero.hero-blend .hero-buttons .btn-secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
}
body .hero.hero-blend .hero-buttons .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: #fff;
}

/* Mission section text - white on dark canvas */
body .company-mission-text h2 { color: #79c0ff; }
body .company-mission-text p { color: #ffffff; }

/* About teaser text - white on dark canvas */
body .company-about-teaser-content h2 { color: #ffffff; }
body .company-about-teaser-content p { color: rgba(255, 255, 255, 0.78); }
body .company-about-teaser .pillar-link { color: #79c0ff; }
body .company-about-teaser .pillar-link:hover { border-bottom-color: #79c0ff; }

/* Hero video tint adapted to dark canvas */
body .hero-blend-video::after {
    background: linear-gradient(
        90deg,
        rgba(6, 14, 34, 0.45) 0%,
        rgba(53, 117, 242, 0.12) 40%,
        rgba(6, 14, 34, 0.35) 100%);
}

/* Footer - fully transparent so the body canvas runs all the way to the
   bottom of every page. */
body .site-footer {
    background: transparent !important;
}
body .footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* Header - sticky and starts fully transparent. Once the user scrolls past
   the hero (40px threshold, toggled by script.js), a soft backdrop fades in
   via a pseudo-element whose bottom edge is masked to transparent. That
   eliminates the rectangular boundary that backdrop-filter normally creates,
   so the header reads as a soft glow over the page rather than a shelf. */
body .site-header {
    position: sticky !important;
    top: 0;
    left: 0;
    right: 0;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    z-index: 1000;
}
body .site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(6, 14, 34, 0.88) 0%,
        rgba(6, 14, 34, 0.55) 55%,
        rgba(6, 14, 34, 0) 100%);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: -1;
}
body .site-header.scrolled::before {
    opacity: 1;
}
body .site-header::after {
    display: none !important;
}
body .main-nav a {
    color: rgba(255, 255, 255, 0.85);
}
body .main-nav a:hover {
    color: #ffffff;
}
body .main-nav a::after {
    background: #ffffff;
}
body .hamburger span {
    background: #ffffff;
}
body .mobile-menu {
    background: #000000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body .mobile-menu nav a {
    color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   All pages - additional section transparencies + dark-canvas text colors.
   2026-05-20 second pass: extend the homepage canvas treatment site-wide.
   ========================================================================== */

/* Strip every section bg AND every per-section radial accent. The body
   provides all atmosphere - per-section radials bounded to the section
   create lit-interior / dark-edges patterns that mark section boundaries. */
.trust-strip,
.pillar-section-alt,
.pricing-teaser,
.faq-section,
.hero.hero-static,
.pillar-cinematic,
.problem-section,
.pillar-section,
.fleet-section,
.services-detail,
.about-content,
.mission-section,
.expertise-section,
.contact-section,
.trial-page,
.page-hero,
.page-hero-video,
.product-detail-section,
.services-section {
    background: transparent !important;
}

/* Hide every section's ::before/::after atmospheric overlay so nothing
   bounded to a section can create a visible edge. */
.hero.hero-static::after,
.pillar-cinematic::before,
.pillar-cinematic::after,
.featured-product-cinematic::before,
.featured-product-cinematic::after,
.cta-section::before,
.cta-section::after,
.company-mission::before,
.company-about-teaser::before {
    display: none !important;
}

/* Section headers + leads sitting directly on the canvas → light text */
.section-header h2 { color: #ffffff; }
.section-header p,
.section-lead { color: rgba(255, 255, 255, 0.78); }

/* Pillar content (products.html IDE pillar) sits directly on canvas */
.pillar-section .pillar-content h2 { color: #ffffff; }
.pillar-section .pillar-content p { color: rgba(255, 255, 255, 0.82); }
.pillar-section .pillar-bullets li { color: rgba(255, 255, 255, 0.82); }
.pillar-section .pillar-bullets li::before { color: #79c0ff; }
.pillar-section .pillar-tag { color: #79c0ff; }
.pillar-link { color: #79c0ff; }
.pillar-link:hover { border-bottom-color: #79c0ff; }

/* Services detail content (services.html) */
.service-detail-content h2 { color: #ffffff; }
.service-detail-content p { color: rgba(255, 255, 255, 0.82); }
.service-detail-content ul li { color: rgba(255, 255, 255, 0.78); }

/* Page hero (about/services/pricing/contact) */
.page-hero h1 { color: #ffffff; }
.page-hero p { color: rgba(255, 255, 255, 0.82); }

/* About page text columns */
.about-text h2 { color: #ffffff; }
.about-text p { color: rgba(255, 255, 255, 0.82); }

/* Contact info text */
.contact-info h2 { color: #ffffff; }
.contact-info > p { color: rgba(255, 255, 255, 0.82); }
.contact-item h4 { color: #ffffff; }
.contact-item p { color: rgba(255, 255, 255, 0.78); }
.social-links h4 { color: #ffffff; }

/* Diff panes already dark - leave alone. Problem cards, fleet cards, pricing
   cards, mission cards, service cards, feature items keep their white bg
   and dark text - they read fine as cards on a dark canvas. */

/* Trust strip label (still exists on products page if reused) */
.trust-strip-label { color: rgba(255, 255, 255, 0.7); }

/* Process grid - 4 numbered steps, responsive */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 48px;
}
@media (max-width: 1024px) {
    .process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .process-grid { grid-template-columns: 1fr; }
}

/* Differentiators grid - 2x2 layout (was auto-fit which left an orphan) */
.differentiators-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 48px;
}
@media (max-width: 760px) {
    .differentiators-grid { grid-template-columns: 1fr; }
}

/* Pillar-link readability on the dark canvas */
body .pillar-link {
    color: #79c0ff;
    font-weight: 600;
}
body .pillar-link:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* Service-detail screenshot/image - remove the light-grey border that shows
   as a stray outline on the dark canvas */
body .service-detail-image img {
    border: none;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

/* FAQ items as dark glass cards on the canvas */
body .faq-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(10px);
}
body .faq-item summary { color: #ffffff; font-weight: 600; }
body .faq-item summary:hover { background: rgba(255, 255, 255, 0.06) !important; }
body .faq-item summary::after { color: #79c0ff; }
body .faq-item .faq-body { color: rgba(255, 255, 255, 0.80); }
body .faq-item .faq-body a { color: #79c0ff; }

/* CTA section text (used across pages) */
.cta-section .cta-content h2 { color: #ffffff; }
.cta-section .cta-content p { color: rgba(255, 255, 255, 0.85); }


/* Beta form consent line */
.beta-consent { display:flex; align-items:flex-start; gap:10px; margin:2px 0 14px; font-size:.86rem; line-height:1.5; color:#9fb2d1; cursor:pointer; }
.beta-consent input { margin-top:2px; flex:none; width:16px; height:16px; accent-color:#3575f2; cursor:pointer; }
.beta-consent a { color:#5a91f5; text-decoration:underline; }