/* JSE marketing surface — shared by landing / trust / compliance. Tokens + base type live in style.css under [data-theme="light"]. Pages opt in by setting . */ [data-theme="light"] body { background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.55; } /* Page-level horizontal-scroll guard. The hero matrix card on /landing was the chronic offender — even after wiring it to overflow-x:auto, iOS Safari was extending the body width and clipping text at the page edge instead of the viewport edge. This stops that at the document level; components with legitimate internal scroll (matrix grid) keep working because their own overflow-x:auto handles the scroll inside their box. */ [data-theme="light"] html, [data-theme="light"] body { overflow-x: hidden; max-width: 100vw; } [data-theme="light"] a { color: inherit; text-decoration: none; } [data-theme="light"] button { font-family: inherit; cursor: pointer; } [data-theme="light"] .wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; } /* NAV */ [data-theme="light"] .jse-nav { border-bottom: 1px solid var(--line); background: rgba(250, 250, 247, 0.85); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 50; } /* Nav layout: three flex items (brand · nav-links · nav-cta) so space-between distributes evenly. Previously brand + nav-links shared one container, which let the right edge of nav-links abut nav-cta on narrow viewports ("PricingSign in" with no gap). */ [data-theme="light"] .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; gap: 32px; } [data-theme="light"] .brand { display: flex; align-items: center; gap: 8px; } [data-theme="light"] .brand-mark { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; } [data-theme="light"] .brand-mark .dot { color: var(--accent); margin-left: 4px; } [data-theme="light"] .nav-links { display: flex; gap: 28px; font-size: 13.5px; color: var(--dim); flex-wrap: wrap; justify-content: center; flex: 1; } [data-theme="light"] .nav-links a:hover, [data-theme="light"] .nav-links a.active { color: var(--ink); } [data-theme="light"] .nav-cta { display: flex; gap: 14px; align-items: center; font-size: 13px; flex-shrink: 0; } [data-theme="light"] .nav-cta a { color: var(--dim); } [data-theme="light"] .nav-cta a.btn { color: inherit; } [data-theme="light"] .nav-cta a:hover { color: var(--ink); } /* Auth-aware credit pill (injected by nav-auth.js when signed in). Visual contract matches the in-product pill on /app + /eval. */ [data-theme="light"] .nav-cta .nav-credit-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; color: var(--ink) !important; background: #fff; text-decoration: none; } [data-theme="light"] .nav-cta .nav-credit-pill:hover { border-color: var(--accent); color: var(--accent) !important; } [data-theme="light"] .nav-cta .nav-credit-pill svg { color: var(--accent); } /* BUTTONS */ [data-theme="light"] .btn { display: inline-block; padding: 10px 18px; border-radius: 6px; font-size: 13px; font-weight: 500; border: none; cursor: pointer; transition: opacity 0.15s; text-decoration: none; } [data-theme="light"] .btn:hover { opacity: 0.9; } [data-theme="light"] .btn-primary { background: var(--accent); color: var(--bg); } [data-theme="light"] .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--dim2); } [data-theme="light"] .btn-lg { padding: 13px 22px; font-size: 14px; } /* SECTIONS */ [data-theme="light"] section { border-bottom: 1px solid var(--line); } [data-theme="light"] .section-pad { padding: 88px 0; } [data-theme="light"] .eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 14px; text-transform: uppercase; } [data-theme="light"] h1 { font-size: 76px; line-height: 0.98; margin: 0 0 24px; letter-spacing: -0.035em; font-weight: 500; color: var(--ink); } [data-theme="light"] h2 { font-size: 48px; line-height: 1.04; margin: 0 0 16px; letter-spacing: -0.025em; font-weight: 500; color: var(--ink); } [data-theme="light"] h3 { font-size: 24px; margin: 0; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); } [data-theme="light"] p { color: var(--dim); line-height: 1.65; } /* HERO */ [data-theme="light"] .hero { position: relative; overflow: hidden; } [data-theme="light"] .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; opacity: 0.5; } [data-theme="light"] .hero-inner { padding: 72px 0 80px; position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; } [data-theme="light"] .live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; background: rgba(31, 122, 82, 0.08); border: 1px solid rgba(31, 122, 82, 0.28); border-radius: 100px; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--accent); margin-bottom: 28px; letter-spacing: 0.08em; } [data-theme="light"] .live-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: jse-pulse 1.4s ease-in-out infinite; } @keyframes jse-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } [data-theme="light"] .hero-foot { margin-top: 36px; display: flex; gap: 24px; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--dim); flex-wrap: wrap; } [data-theme="light"] .hero p.lede { font-size: 17px; line-height: 1.6; margin: 0 0 36px; max-width: 480px; color: var(--dim); } [data-theme="light"] .cta-row { display: flex; gap: 12px; flex-wrap: wrap; } /* CARDS */ [data-theme="light"] .card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 28px; } [data-theme="light"] .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } [data-theme="light"] .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } [data-theme="light"] .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } /* METRICS BAR */ [data-theme="light"] .metrics { background: var(--card); } [data-theme="light"] .metrics .wrap { padding-top: 32px; padding-bottom: 32px; } [data-theme="light"] .metrics .label { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.12em; color: var(--dim); margin-bottom: 6px; } [data-theme="light"] .metrics .val { font-size: 28px; letter-spacing: -0.02em; font-weight: 500; color: var(--ink); } /* TABLE */ [data-theme="light"] .tbl { background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } [data-theme="light"] .tbl-head, [data-theme="light"] .tbl-row { display: grid; padding: 14px 24px; align-items: center; } [data-theme="light"] .tbl-head { background: var(--card2); border-bottom: 1px solid var(--line); font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.1em; color: var(--dim); } [data-theme="light"] .tbl-row { border-bottom: 1px solid var(--line); font-size: 13px; } [data-theme="light"] .tbl-row:last-child { border-bottom: none; } /* FOOTER */ [data-theme="light"] footer { background: var(--bg); border-top: 1px solid var(--line); padding: 48px 0 24px; } [data-theme="light"] .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--line); } [data-theme="light"] .foot-col h4 { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.14em; color: var(--dim); margin: 0 0 14px; font-weight: 400; text-transform: uppercase; } [data-theme="light"] .foot-col a { display: block; font-size: 13px; margin-bottom: 7px; color: var(--ink); } [data-theme="light"] .foot-col a:hover { color: var(--accent); } [data-theme="light"] .foot-bar { padding-top: 18px; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--dim); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } /* PAGE HEADER (non-hero pages) */ [data-theme="light"] .page-head { padding: 64px 0 48px; border-bottom: 1px solid var(--line); } [data-theme="light"] .page-head h1 { font-size: 56px; margin: 0 0 18px; } [data-theme="light"] .page-head p { font-size: 17px; max-width: 640px; margin: 0; } /* TRUST / COMPLIANCE TABLES */ [data-theme="light"] .cert-tbl { background: var(--card); border: 1px solid var(--line); border-radius: 8px; } [data-theme="light"] .cert-row { display: grid; grid-template-columns: 1.4fr 1fr auto; padding: 18px 24px; border-bottom: 1px solid var(--line); align-items: center; gap: 24px; } [data-theme="light"] .cert-row:last-child { border-bottom: none; } [data-theme="light"] .cert-row .name { font-size: 15px; } [data-theme="light"] .cert-row .desc { font-size: 13px; color: var(--dim); } [data-theme="light"] .cert-row .status { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--accent); } [data-theme="light"] .cert-row .status.warn { color: var(--warn); } /* PROSE (long-form copy on trust/compliance) */ [data-theme="light"] .prose { max-width: 720px; } [data-theme="light"] .prose h2 { font-size: 32px; margin: 48px 0 16px; letter-spacing: -0.02em; } [data-theme="light"] .prose h3 { font-size: 18px; margin: 28px 0 10px; } [data-theme="light"] .prose p { font-size: 15px; color: var(--ink); margin: 0 0 14px; } [data-theme="light"] .prose ul { padding-left: 20px; margin: 0 0 16px; color: var(--ink); } [data-theme="light"] .prose ul li { margin-bottom: 8px; font-size: 15px; } [data-theme="light"] .prose code { font-family: "IBM Plex Mono", monospace; font-size: 13px; background: var(--card); padding: 2px 6px; border-radius: 3px; border: 1px solid var(--line); } /* CTA SECTION */ [data-theme="light"] .cta-section { background: var(--card); } [data-theme="light"] .cta-section .wrap { padding: 110px 0; text-align: center; } [data-theme="light"] .cta-section h2 { font-size: 76px; line-height: 0.98; margin: 0 0 24px; letter-spacing: -0.035em; } [data-theme="light"] .cta-section p { font-size: 16px; max-width: 540px; margin: 0 auto 32px; } [data-theme="light"] .cta-section .cta-row { justify-content: center; } /* LIVE MATRIX */ [data-theme="light"] .matrix-card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 20px; font-family: "IBM Plex Mono", monospace; } [data-theme="light"] .matrix-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } [data-theme="light"] .matrix-head .left { display: flex; gap: 16px; align-items: center; } [data-theme="light"] .matrix-head .live { display: flex; align-items: center; gap: 8px; } [data-theme="light"] .matrix-head .live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: jse-pulse 1.4s ease-in-out infinite; } [data-theme="light"] .matrix-head .live span { font-size: 11px; color: var(--accent); letter-spacing: 0.12em; } [data-theme="light"] .matrix-head .meta { font-size: 11px; color: var(--dim); } [data-theme="light"] .matrix-grid { display: grid; grid-template-columns: 100px repeat(6, 1fr); gap: 4px; } [data-theme="light"] .matrix-grid .col-label { font-size: 10px; color: var(--dim); padding: 0 4px 8px; text-align: center; letter-spacing: 0.04em; } [data-theme="light"] .matrix-grid .row-label { font-size: 10.5px; color: var(--dim); padding: 8px 4px; align-self: center; } [data-theme="light"] .matrix-grid .cell { border: 1px solid var(--line); border-radius: 3px; padding: 8px 6px; text-align: center; min-height: 42px; display: flex; flex-direction: column; justify-content: center; gap: 2px; transition: all 0.2s; } [data-theme="light"] .matrix-grid .cell .stat { font-size: 9.5px; letter-spacing: 0.08em; } [data-theme="light"] .matrix-grid .cell .lat { font-size: 9px; color: var(--dim); } [data-theme="light"] .matrix-grid .cell.pending { color: var(--dim2); } [data-theme="light"] .matrix-grid .cell.pending .stat { color: var(--dim2); } [data-theme="light"] .matrix-grid .cell.running { background: rgba(58, 95, 184, 0.14); border-color: var(--accent2); } [data-theme="light"] .matrix-grid .cell.running .stat { color: var(--accent2); } [data-theme="light"] .matrix-grid .cell.pass { background: rgba(31, 122, 82, 0.10); border-color: var(--accent); } [data-theme="light"] .matrix-grid .cell.pass .stat { color: var(--accent); } [data-theme="light"] .matrix-grid .cell.warn { background: rgba(184, 134, 42, 0.12); border-color: var(--warn); } [data-theme="light"] .matrix-grid .cell.warn .stat { color: var(--warn); } [data-theme="light"] .matrix-grid .cell.fail { background: rgba(185, 74, 74, 0.10); border-color: var(--fail); } [data-theme="light"] .matrix-grid .cell.fail .stat { color: var(--fail); } [data-theme="light"] .matrix-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } [data-theme="light"] .matrix-foot .lbl { font-size: 9.5px; color: var(--dim); letter-spacing: 0.1em; margin-bottom: 4px; } [data-theme="light"] .matrix-foot .val { font-size: 18px; font-weight: 500; } [data-theme="light"] .matrix-foot .val.ok { color: var(--accent); } [data-theme="light"] .matrix-foot .val.w { color: var(--warn); } [data-theme="light"] .matrix-foot .val.f { color: var(--fail); } /* PRICING CARD ACCENT (for the recommended tier) */ [data-theme="light"] .price-card-recommended { background: linear-gradient(180deg, rgba(31, 122, 82, 0.06), var(--card)); border-color: rgba(31, 122, 82, 0.45); position: relative; } [data-theme="light"] .price-badge { position: absolute; top: -10px; left: 28px; background: var(--accent); color: var(--bg); font-family: "IBM Plex Mono", monospace; font-size: 9.5px; padding: 4px 10px; letter-spacing: 0.14em; border-radius: 3px; font-weight: 600; } [data-theme="light"] .price-tier-name { font-size: 22px; font-weight: 500; margin-bottom: 14px; color: var(--ink); } [data-theme="light"] .price-amount { display: flex; align-items: baseline; gap: 6px; margin-bottom: 18px; } [data-theme="light"] .price-amount .num { font-size: 34px; letter-spacing: -0.02em; font-weight: 500; color: var(--ink); } [data-theme="light"] .price-amount .per { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--dim); } [data-theme="light"] .price-divider { height: 1px; background: var(--line); margin-bottom: 18px; } [data-theme="light"] .price-features { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; } [data-theme="light"] .price-features li { font-size: 13px; color: var(--dim); display: flex; gap: 10px; } [data-theme="light"] .price-features li .check { font-family: "IBM Plex Mono", monospace; color: var(--accent); } @media (max-width: 900px) { [data-theme="light"] .hero-inner { grid-template-columns: 1fr; } [data-theme="light"] .grid-2, [data-theme="light"] .grid-3, [data-theme="light"] .grid-4, [data-theme="light"] .foot-grid { grid-template-columns: 1fr; gap: 16px; } [data-theme="light"] h1 { font-size: 48px; } [data-theme="light"] h2 { font-size: 34px; } [data-theme="light"] .page-head h1 { font-size: 38px; } [data-theme="light"] .cta-section h2 { font-size: 48px; } } /* Phone breakpoint — the 900px one above is tablet-shaped. Below 600px the marketing nav was wrapping ("Just Smarter Eval" splitting onto 3 lines, nav-links stacking vertically) and the live-matrix card was overflowing the viewport. This block is the phone-specific cleanup. */ @media (max-width: 600px) { /* Nav: tighter padding, smaller text, and keep the brand on one line. The 5-link nav (Product/Catalog/Trust/Compliance/Pricing) is too dense at this width — hide it; the run-an-eval CTA + sign-in stay visible, which is what we want from a phone visitor anyway. */ [data-theme="light"] .jse-nav { padding: 12px 16px; } [data-theme="light"] .nav-inner { gap: 8px; } [data-theme="light"] .brand-mark { font-size: 14px; } [data-theme="light"] .nav-links { display: none; } [data-theme="light"] .nav-cta { gap: 10px; font-size: 12px; } [data-theme="light"] .nav-cta .btn { padding: 8px 12px; font-size: 12px; } /* .wrap default padding is 0 40px (80px gone on phone). Narrow it so hero, matrix card, sections all get full viewport minus a sensible gutter. Without this, .matrix-card{max-width:100%} computes to 100% of a too-narrow .wrap and looks cramped, AND the pricing section's grid items overflow because they have intrinsic content. */ [data-theme="light"] .wrap { padding: 0 16px; max-width: 100%; } /* Hero: scale headline + lede; lede was overflowing because max-width was 480px (wider than a 375px phone viewport). Constrain to 100%. */ [data-theme="light"] h1 { font-size: 38px; } [data-theme="light"] .hero p.lede { font-size: 15px; max-width: 100%; } [data-theme="light"] .page-head h1 { font-size: 30px; } [data-theme="light"] .cta-section h2 { font-size: 36px; } /* Live-matrix card: 7-column grid (label + 6 models) at full readable cell size doesn't fit a phone viewport. Wrap the WHOLE card in a horizontal scroll container — the prior approach (overflow on the card itself) wasn't kicking in because grid children's intrinsic min-content width was forcing the card to stretch past 100%. Now the card stays at viewport width, gets internal scroll, and the grid inside can be its full 540px without bleeding past the viewport edge. max-width:100% + box-sizing:border-box on the card belt-and-braces this. */ [data-theme="light"] .matrix-card { padding: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; width: 100%; box-sizing: border-box; } [data-theme="light"] .matrix-grid { min-width: 540px; } [data-theme="light"] .matrix-foot { min-width: 540px; grid-template-columns: repeat(5, minmax(80px, 1fr)); } /* Hero column itself must respect viewport width — without min-width:0 a grid item happily lets its content blow past the row width (Firefox/iOS Safari behaviour). */ [data-theme="light"] .hero-inner, [data-theme="light"] .hero-inner > * { min-width: 0; max-width: 100%; } /* Pricing cards stack already (grid-3 → 1fr above); just give them room and remove the recommended-card scaling that flattens awkwardly at narrow widths. */ [data-theme="light"] .price-amount .num { font-size: 28px; } [data-theme="light"] .price-tier-name { font-size: 18px; } }