/* =====================================================================
   Adakode — brand stylesheet
   Lime    #76E600
   Black   #111111
   Off-white #F7F8F5
   ===================================================================== */

:root {
    /* Brand — the three colors the whole site is built on */
    --brand-color: #76E600;   /* Electric Lime: primary buttons, links, highlights */
    --brand-black: #111111;   /* Near Black: headings, dark sections, code UI, footer */
    --brand-white: #F7F8F5;   /* Soft White: main page background */

    /* Named scale used across the layout */
    --lime: #76E600;
    --lime-dark: #5FBF00;
    --lime-soft: rgba(118, 230, 0, 0.12);
    --lime-soft-2: rgba(118, 230, 0, 0.2);
    --black: #111111;
    --off-white: #F7F8F5;
    --white: #FFFFFF;

    /* Aliases used across the layout */
    --primary: var(--lime);
    --primary-dark: var(--lime-dark);
    --dark: var(--black);
    --light: var(--off-white);
    --gray: #6B6F76;
    --muted: #4A4F55;
    --code-bg: var(--black);
    --border: rgba(17, 17, 17, 0.08);

    /* Typography */
    --heading-line-height: 1.15;
    --body-line-height: 1.7;
    --paragraph-spacing: 1.6rem;
    --heading-spacing: 1.8rem;

    /* Type scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.875rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.025em;
    font-weight: 700;
    color: var(--black);
}

h1 {
    font-size: var(--text-4xl);
    line-height: 1.1;
    font-weight: 800;
}

h2 {
    font-size: var(--text-2xl);
    line-height: 1.2;
}

h3 {
    font-size: var(--text-xl);
    line-height: 1.3;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    line-height: var(--body-line-height);
    color: var(--dark);
    background-color: var(--light);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------------------------------------------------------------- Header */

header {
    background-color: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
}

/* The logo file (1672x941) carries large built-in white margins: the
   artwork is only 1522x263, from y330 to y592. Scaling the whole canvas on
   width keeps the mark at nav size but stretches the header around the
   empty white space, so the margins are clipped here. The mark itself is
   unchanged - only the blank space around it is removed. */
.logo {
    display: block;
    flex-shrink: 0;
    width: 205px;
    height: 40px;
    max-width: 100%;
    overflow: hidden;
    text-decoration: none;
}

.logo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-links a {
    color: var(--dark);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.25s;
    font-size: var(--text-sm);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.nav-links a:hover {
    color: var(--lime-dark);
}

.nav-links a.nav-cta {
    color: var(--muted);
}

.nav-links a.nav-cta:hover {
    color: var(--black);
    box-shadow: inset 0 -2px 0 var(--lime);
}

/* ------------------------------------------------------------------ Hero */

.hero {
    /* More room under the header: both hero columns start lower. */
    padding-top: 120px;
    padding-bottom: 70px;
    background:
        radial-gradient(60% 80% at 85% 10%, var(--lime-soft-2) 0%, rgba(118, 230, 0, 0) 60%),
        radial-gradient(50% 70% at 10% 90%, rgba(118, 230, 0, 0.14) 0%, rgba(118, 230, 0, 0) 55%),
        var(--off-white);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23111111' fill-opacity='0.10'/%3E%3C/svg%3E");
    opacity: 0.7;
    z-index: 0;
}

.hero .container {
    position: relative;
    z-index: 1;
}

.hero-grid {
    display: grid;
    grid-template-columns: 44fr 56fr;
    /* Wider gutter between the copy and the terminal window. */
    gap: 80px;
    /* Top-align the copy and the terminal card so their top edges meet,
       instead of centering the shorter card against the taller copy. */
    align-items: start;
}

.hero-content {
    text-align: left;
}

.eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--black);
    background: var(--lime);
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: var(--space-6);
}

.hero h1 {
    font-size: 2.75rem;
    margin-bottom: var(--heading-spacing);
    color: var(--black);
    line-height: var(--heading-line-height);
    font-weight: 800;
    letter-spacing: -0.9px;
}

.hero p {
    font-size: 1.2rem;
    margin: 0 0 var(--paragraph-spacing);
    color: var(--muted);
    line-height: var(--body-line-height);
    font-weight: 400;
}

.hero-note {
    font-size: var(--text-sm) !important;
    color: var(--gray) !important;
    margin-top: var(--space-6) !important;
    margin-bottom: 0 !important;
}

.buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* -------------------------------------------------------------- Buttons */

.btn {
    display: inline-block;
    padding: 13px 26px;
    border-radius: 8px;
    font-weight: 600;
    font-size: var(--text-base);
    text-decoration: none;
    transition: transform 0.2s, background-color 0.25s, color 0.25s, box-shadow 0.25s, border-color 0.25s;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.2;
}

.btn-primary {
    background-color: var(--lime);
    color: var(--black);
    box-shadow: 0 6px 18px rgba(118, 230, 0, 0.35);
}

.btn-primary:hover {
    background-color: var(--lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(118, 230, 0, 0.4);
}

.btn-secondary {
    background-color: var(--white);
    color: var(--black);
    border: 1px solid rgba(17, 17, 17, 0.15);
}

.btn-secondary:hover {
    border-color: var(--black);
    transform: translateY(-2px);
}

.btn-ghost {
    background-color: transparent;
    color: var(--black);
    border: 1px solid rgba(17, 17, 17, 0.15);
}

.btn-ghost:hover {
    border-color: var(--lime);
    color: var(--black);
    background-color: var(--lime-soft);
    transform: translateY(-2px);
}

/* ------------------------------------------------------- Hero visual */

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The real Adakode panel, running in a real VS Code shell (assets/demo): the hero
   shows the product itself rather than a drawing of it. The window is light, like the
   page, so the shade has to separate two whites: a hairline ring draws the silhouette,
   a tight contact shadow keeps the edge off the page, two soft layers give it depth,
   and a spread-less layer wraps a faint shade around every side. The background is the
   white the window paints before the demo loads, not a colour of its own. */
.hero-demo-frame {
    display: block;
    width: 100%;
    max-width: 620px;
    height: 460px;
    border: 0;
    border-radius: 12px;
    background-color: var(--white);
    box-shadow:
        0 0 0 1px var(--border),
        0 1px 2px rgba(17, 17, 17, 0.06),
        0 8px 16px -8px rgba(17, 17, 17, 0.15),
        0 22px 40px -24px rgba(17, 17, 17, 0.24),
        0 0 28px -14px rgba(17, 17, 17, 0.14);
}

/* ------------------------------------------------------- Window dots */

.dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
}

.dot-red { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green { background: #28c840; }

/* -------------------------------------------------------------- Stats */

.stats-container {
    margin-top: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.stat-badge {
    display: inline-flex;
    height: 34px;
    border-radius: 6px;
    overflow: hidden;
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 6px rgba(17, 17, 17, 0.12);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.stat-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(17, 17, 17, 0.16);
}

.badge-label {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background-color: var(--black);
    color: #d7d9d6;
    height: 100%;
}

.badge-value {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background-color: var(--lime);
    color: var(--black);
    height: 100%;
}

/* ----------------------------------------------------------- Sections */

/* Section headings, from Features down to Trusted by Teams, sit a little smaller than
   they used to (2.5rem/1.9rem/1.6rem), so they read as labels above their section
   rather than competing with the hero. The hero h1 and the modal title have their own
   classes and keep their own sizes. */
.section-title {
    text-align: center;
    margin-bottom: var(--space-4);
    font-size: 2.2rem;
    color: var(--black);
    font-weight: 700;
    line-height: var(--heading-line-height);
    letter-spacing: -0.6px;
}

.section-subtitle {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-12);
    color: var(--gray);
    font-size: var(--text-md);
}

/* ---------------------------------------------------------- Features */

.features {
    padding: 90px 0;
    background-color: var(--off-white);
}

.feature-grid {
    display: grid;
    /* A stable 2x2 grid of compact square tiles: two per row, no orphan row. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 720px;
    margin: 0 auto;
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    /* Wider than tall: the copy is short, so a 3:2 tile drops the square
       card's dead space without touching its width. */
    aspect-ratio: 3 / 2;
    padding: 20px;
    /* The same card style as the "Kind Words From Users" cards -- a faint lime
       wash over a bordered, rounded panel -- but without their bold left edge. */
    background: linear-gradient(135deg, rgba(118, 230, 0, 0.08) 0%, rgba(118, 230, 0, 0.02) 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(17, 17, 17, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(118, 230, 0, 0.55);
    box-shadow: 0 14px 28px rgba(17, 17, 17, 0.12);
    background: linear-gradient(135deg, rgba(118, 230, 0, 0.16) 0%, rgba(118, 230, 0, 0.04) 100%);
}

/* Icon on top, then the title, then the copy. */
.feature-card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
}

.feature-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--lime-soft);
    color: var(--black);
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.feature-icon svg {
    width: 20px;
    height: 20px;
}

.feature-card:hover .feature-icon {
    background: var(--lime);
}

.feature-title {
    font-size: 1rem;
    color: var(--black);
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.feature-card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--muted);
}

code, pre {
    font-family: 'Fira Code', 'JetBrains Mono', 'SF Mono', Consolas, Monaco, 'Andale Mono', monospace;
    font-feature-settings: "liga" 1, "calt" 1;
    letter-spacing: -0.02em;
    font-size: 0.95em;
}

/* ------------------------------------------------------- Testimonials */

.testimonials {
    padding: 90px 0;
    background-color: var(--off-white);
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
    align-items: stretch;
}

.testimonial-card {
    background: linear-gradient(135deg, rgba(118, 230, 0, 0.08) 0%, rgba(118, 230, 0, 0.02) 100%);
    border: 1px solid var(--border);
    border-left: 3px solid var(--lime);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(17, 17, 17, 0.06);
    transition: opacity 0.4s ease, transform 0.4s ease, height 0.4s ease, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}

.testimonial-card:hover {
    box-shadow: 0 14px 28px rgba(17, 17, 17, 0.12);
    background: linear-gradient(135deg, rgba(118, 230, 0, 0.16) 0%, rgba(118, 230, 0, 0.04) 100%);
}

.testimonial-text {
    margin-bottom: 1.25rem;
    font-style: italic;
    color: var(--muted);
    position: relative;
    z-index: 1;
    font-size: 1.05rem;
    line-height: var(--body-line-height);
    text-wrap: balance;
}

.testimonial-text::before {
    content: "\201C\00A0";
    font-family: Georgia, serif;
    font-size: 1.6em;
    line-height: 0;
    color: var(--lime-dark);
    margin-right: 2px;
    vertical-align: -0.3em;
}

.testimonial-text::after {
    content: "\201D";
    font-family: Georgia, serif;
    font-size: 1.6em;
    line-height: 0;
    color: var(--lime-dark);
    margin-left: 2px;
    vertical-align: -0.3em;
}

.testimonial-author {
    margin-top: auto;
    padding-top: 10px;
    font-weight: 600;
    color: var(--black);
    font-size: 0.9rem;
}

.testimonial-author a {
    color: var(--black);
    text-decoration: none;
    border-bottom: 2px solid var(--lime);
    transition: color 0.25s;
}

.testimonial-author a:hover {
    color: var(--lime-dark);
}

/* ------------------------------------------------------- More info */

.info-section {
    padding: 90px 0;
    background-color: var(--white);
}

.info-columns {
    display: flex;
    justify-content: center;
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

/* The teams sit straight on the page background. There is deliberately no card
   panel, border or lift behind them, so a logo reads as pasted onto the section
   rather than framed inside a box. Each card shrinks to its logo and the pair is
   centred in the row, so both logos sit together in the middle of the section. */
.info-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.team-logo {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
}

/* ------------------------------------------------------------- Footer */

footer {
    background-color: var(--black);
    color: #d7d9d6;
    padding: 46px 0;
    text-align: center;
}

.footer-links {
    margin-bottom: 20px;
}

.footer-links a {
    color: #d7d9d6;
    text-decoration: none;
    margin: 0 12px;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color 0.25s;
}

.footer-links a:hover {
    color: var(--lime);
}

.copyright {
    color: #8b9096;
    font-size: 0.85rem;
}

/* ------------------------------------------------------------ Motion */

/* The `.js` class is added by a tiny inline script in index.html before the
   page paints. Everything below is scoped to it, so with JavaScript disabled
   the page renders fully visible with no motion. The prefers-reduced-motion
   block at the end of this file turns the motion back off for users who ask
   for that. */

.js .hero-content > * {
    animation: rise-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.js .hero-content > *:nth-child(1) { animation-delay: 0.05s; }
.js .hero-content > *:nth-child(2) { animation-delay: 0.13s; }
.js .hero-content > *:nth-child(3) { animation-delay: 0.21s; }
.js .hero-content > *:nth-child(4) { animation-delay: 0.29s; }
.js .hero-content > *:nth-child(5) { animation-delay: 0.37s; }

.js .hero-visual {
    animation: rise-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.24s both;
}

@keyframes rise-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

/* Terminal lines are revealed one at a time by main.js. Their line boxes stay
   in the layout from the start, so revealing them shifts nothing. */
/* Headings glide in the first time they scroll into view. main.js adds the
   `reveal` class, so if it never runs they are simply visible. */
.js .reveal {
    opacity: 0;
    transform: translateY(16px);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------- Download dialog */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: rgba(17, 17, 17, 0.55);
}

/* The author `display: flex` above would otherwise beat the browser's own
   `[hidden] { display: none }`, so hide the dialog explicitly. */
.modal-overlay[hidden] { display: none; }

.modal {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 28px;
    border-radius: 14px;
    background-color: var(--white);
    box-shadow: 0 24px 60px rgba(17, 17, 17, 0.28);
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.modal-close:hover {
    background-color: rgba(17, 17, 17, 0.06);
    color: var(--black);
}

.modal-title {
    font-size: var(--text-xl);
    margin-bottom: 4px;
}

.modal-subtitle {
    color: var(--gray);
    font-size: var(--text-sm);
    margin-bottom: 20px;
}

.download-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.download-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background-color: var(--white);
    color: inherit;
    font-family: inherit;
    font-size: var(--text-base);
    text-align: left;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.download-option:not(:disabled) { cursor: pointer; }

.download-option:not(:disabled):hover {
    border-color: var(--black);
    box-shadow: 0 6px 18px rgba(17, 17, 17, 0.08);
    transform: translateY(-1px);
}

.download-option:not(:disabled):active { transform: translateY(0); }

.download-option:disabled { opacity: 0.6; }

/* The real brand mark for each download, monochrome to sit inside the
   black-and-lime palette. */
.download-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background-color: rgba(17, 17, 17, 0.05);
    color: var(--black);
    flex-shrink: 0;
}

.download-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.download-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.download-os {
    font-weight: 600;
    color: var(--black);
    line-height: 1.25;
}

.download-detail {
    color: var(--gray);
    font-size: var(--text-sm);
    line-height: 1.25;
}

.download-badge {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: var(--lime-soft);
    color: var(--lime-dark);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.modal-note {
    margin-top: 18px;
    color: var(--gray);
    font-size: var(--text-xs);
}

.js .modal-overlay.is-open .modal {
    animation: modal-in 0.18s ease-out both;
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
}

body.modal-open { overflow: hidden; }

/* ------------------------------------------------- Marketplace install card */

/* The Marketplace is the headline way to install: it serves the build for the
   reader's own platform and keeps the extension up to date. It sits above the
   offline file in the dialog, and as a white card beside the hero buttons. */
.install-option {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid var(--lime);
    border-radius: 12px;
    background-color: var(--white);
    color: inherit;
    font-family: inherit;
    font-size: var(--text-base);
    text-align: left;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.install-option:hover {
    border-color: var(--lime-dark);
    box-shadow: 0 6px 18px rgba(118, 230, 0, 0.28);
    transform: translateY(-1px);
}

.install-option:active { transform: translateY(0); }

.marketplace-icon {
    width: 32px;
    height: 32px;
    /* Kept big and pulled to the left so it still spans both text rows; the
       right margin is released so the gap is real breathing room, not cancelled. */
    margin: 0 0 0 -6px;
    display: block;
    color: var(--black);
    flex-shrink: 0;
}

.install-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.install-title {
    font-weight: 600;
    color: var(--black);
    line-height: 1.25;
}

.install-detail {
    color: var(--gray);
    font-size: var(--text-sm);
    line-height: 1.25;
}

.install-badge {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: var(--lime);
    color: var(--black);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.install-card {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-top: 14px;
    padding: 8px 14px 8px 12px;
    border: 1px solid rgba(17, 17, 17, 0.15);
    border-radius: 12px;
    background-color: var(--white);
    color: var(--black);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.install-card:hover {
    border-color: var(--black);
    box-shadow: 0 6px 18px rgba(17, 17, 17, 0.12);
    transform: translateY(-1px);
}

.install-card:active { transform: translateY(0); }

.install-card-icon {
    width: 30px;
    height: 30px;
    /* Big enough to span both text rows, pulled left so it stays anchored to the
       card edge; the right margin is released so the icon is not crowding the
       two text rows. */
    margin: 0 0 0 -6px;
    display: block;
    color: var(--black);
    flex-shrink: 0;
}

.install-card-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.install-card-title {
    font-weight: 600;
    line-height: 1.25;
}

.install-card-detail {
    color: var(--gray);
    font-size: var(--text-xs);
    line-height: 1.25;
}

.install-card-badge {
    margin-left: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: var(--lime);
    color: var(--black);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

/* --------------------------------------------------------- Responsive */

@media (max-width: 992px) {
    :root {
        --heading-line-height: 1.25;
        --body-line-height: 1.65;
        --paragraph-spacing: 1.4rem;
        --heading-spacing: 1.6rem;
    }

    body { font-size: 15px; }

    nav { padding: 12px 0; }

    .hero { padding: 50px 0; }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-content {
        text-align: center;
        max-width: 100%;
    }

    .hero h1 { font-size: 2.4rem; }

    .hero p {
        font-size: 1.15rem;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-note { margin-left: auto; margin-right: auto; }

    .buttons { justify-content: center; }

    .stats-container { margin-top: 40px; }

    .section-title { font-size: 1.7rem; }

    .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

    .feature-title { font-size: 1rem; }

    .feature-card { padding: 18px; }

    .feature-card p { font-size: 0.9rem; }

    .hero-demo-frame { height: 420px; }

    .info-columns { flex-direction: column; }

    .nav-links { display: none; }
}

@media (max-width: 576px) {
    :root {
        --heading-line-height: 1.3;
        --paragraph-spacing: 1.2rem;
        --heading-spacing: 1.4rem;
    }

    body { font-size: 14px; }

    .hero { padding: 32px 0; }

    .hero h1 { font-size: 1.85rem; letter-spacing: -0.5px; }

    .stats-container { margin-top: 28px; gap: 10px; }

    .buttons { gap: 10px; }

    .btn { padding: 11px 18px; font-size: 0.95rem; }

    .logo { width: 148px; }

    .section-title { font-size: 1.45rem; }

    .section-subtitle { margin-bottom: 2rem; font-size: 1rem; }

    .feature-grid { grid-template-columns: 1fr; gap: 14px; }

    .feature-card { padding: 18px; }

    /* At this width the window nearly fills the content box, so the all-round
       halo would reach the viewport edge and be cut by .hero's overflow. Keep the
       depth below the window, drop the sideways wrap. */
    .hero-demo-frame {
        height: 360px;
        box-shadow:
            0 0 0 1px var(--border),
            0 1px 2px rgba(17, 17, 17, 0.06),
            0 8px 16px -8px rgba(17, 17, 17, 0.15),
            0 16px 30px -18px rgba(17, 17, 17, 0.24);
    }

}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    /* Show every animated element in its final state, at once. */
    .js .hero-content > *,
    .js .hero-visual {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .js .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
    .js .benchmark-table.reveal-rows tbody tr {
        animation: none !important;
        opacity: 1 !important;
        translate: none !important;
    }
    .benchmark-table tbody tr:hover { transform: none; }
    * { transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------- SWE-bench results table */

/* One panel on the page's soft white: a real <table>, so the columns line up and a
   reader can move through it with the arrow keys. The resolved mark is the brand
   lime, and the word beside it carries the meaning, so the colour is never the only
   signal. Below 700px the rows become stacked cards rather than a sideways scroll. */

.benchmark {
    padding: 90px 0;
    background-color: var(--off-white);
}

.benchmark-panel {
    max-width: 1000px;
    margin: 0 auto;
    /* The same card as "Features" and "Kind Words From Users": a faint lime wash over
       white, the same border, radius and shadow. The table fills it edge to edge, so the
       light lime header band runs the full width and follows the panel's own corners. */
    padding: 0;
    overflow: hidden;
    background-color: var(--white);
    background-image: linear-gradient(135deg, rgba(118, 230, 0, 0.08) 0%, rgba(118, 230, 0, 0.02) 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(17, 17, 17, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.benchmark-panel:hover {
    border-color: rgba(118, 230, 0, 0.45);
    box-shadow: 0 14px 28px rgba(17, 17, 17, 0.1);
}

.benchmark-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

/* The body rows are kept tight, so the table reads as a dense comparison; the header row
   has its own padding rule below and is deliberately left roomier. */
.benchmark-table th,
.benchmark-table td {
    padding: 10px 20px;
    text-align: left;
    vertical-align: middle;
}

.benchmark-table thead th {
    padding-top: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(118, 230, 0, 0.3);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background-color: var(--lime-soft);
    white-space: nowrap;
}

.benchmark-table thead th:first-child { padding-left: 24px; }

.benchmark-table thead th:last-child { padding-right: 24px; }

.benchmark-table tbody tr + tr th,
.benchmark-table tbody tr + tr td {
    border-top: 1px solid var(--border);
}

.benchmark-table tbody th {
    padding-left: 24px;
    font-weight: 500;
    white-space: nowrap;
}

.benchmark-table tbody td:last-child { padding-right: 24px; }

.benchmark-table code {
    padding: 4px 9px;
    border-radius: 6px;
    background-color: rgba(17, 17, 17, 0.05);
    font-family: 'Fira Code', monospace;
    font-size: 0.86em;
    color: var(--black);
    white-space: nowrap;
}

.benchmark-prior {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.benchmark-status {
    color: var(--black);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.benchmark-mark {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 9px;
    border-radius: 3px;
    background-color: var(--lime);
    box-shadow: 0 0 0 3px var(--lime-soft);
}

.benchmark-tag {
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: var(--lime-soft);
    color: var(--lime-dark);
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
}

/* The Source cell is the row's one action, so it reads as a small chip in the page's own
   button language: the brand lime fill with near-black text (the primary button's pair,
   which stays readable), edged and hover-filled with the deeper lime. */
.benchmark-link {
    display: inline-block;
    padding: 4px 13px;
    border: 1px solid var(--lime-dark);
    border-radius: 8px;
    background-color: var(--lime);
    color: var(--black);
    font-size: var(--text-xs);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.benchmark-link:hover {
    border-color: var(--black);
    background-color: var(--lime-dark);
    box-shadow: 0 3px 10px rgba(118, 230, 0, 0.35);
}

/* The rows arrive one after another the first time the table scrolls into view.
   main.js adds `reveal-rows` only when it will also observe the table, so without
   the script - or without IntersectionObserver - every row is simply visible. The
   entrance moves `translate` rather than `transform`, so the hover lift below still
   applies once a row has landed. */
.js .benchmark-table.reveal-rows tbody tr {
    opacity: 0;
}

.js .benchmark-table.reveal-rows.is-visible tbody tr {
    animation: row-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.js .benchmark-table.reveal-rows.is-visible tbody tr:nth-child(1) { animation-delay: 0.02s; }
.js .benchmark-table.reveal-rows.is-visible tbody tr:nth-child(2) { animation-delay: 0.10s; }
.js .benchmark-table.reveal-rows.is-visible tbody tr:nth-child(3) { animation-delay: 0.18s; }

@keyframes row-in {
    from { opacity: 0; translate: 0 12px; }
    to   { opacity: 1; translate: 0 0; }
}

.benchmark-table tbody tr {
    transition: background-color 0.2s ease;
}

.benchmark-table tbody tr:hover {
    background-color: var(--lime-soft);
}

@media (max-width: 880px) {
    /* A four-column table cannot survive a narrow window: its columns need about 820px,
       so below that the rows become cards and the column name is carried by the cell
       itself, from data-label. Above the break the table fits its card with room to
       spare, so the card never has to clip or scroll a column away. */
    .benchmark-panel { padding: 12px; }

    .benchmark-table thead { display: none; }

    .benchmark-table,
    .benchmark-table tbody,
    .benchmark-table tr,
    .benchmark-table th,
    .benchmark-table td {
        display: block;
        width: 100%;
    }

    /* Each row becomes its own white card, so the stacked table reads like the rest of
       the page's panels rather than a run of ruled lines. */
    .benchmark-table tbody tr {
        margin-bottom: 10px;
        padding: 14px 16px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background-color: var(--white);
    }

    .benchmark-table tbody tr:last-child { margin-bottom: 0; }

    .benchmark-table tbody tr th,
    .benchmark-table tbody tr td {
        padding: 3px 0;
        border-top: none;
        white-space: normal;
    }

    .benchmark-table tbody th[data-label]::before,
    .benchmark-table tbody td[data-label]::before {
        display: block;
        content: attr(data-label) ": ";
        color: var(--gray);
        font-size: var(--text-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
}