/* ==========================================================================
   JSpark product pages — additions on top of the site-wide style.css
   Only new components live here; everything that already exists
   (.container, .section, .cap-card, .btn, footer…) is reused as-is.
   ========================================================================== */

/* ---- Utilities --------------------------------------------------------- */
/* The site-wide img rule sets width but not height, so the HTML height
   attribute would stay fixed while the width shrinks — squishing the image.
   Components that need a fixed height set it explicitly and still win. */
img { height: auto; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- Dark sections -----------------------------------------------------
   Re-declaring the design tokens inside a dark block makes every inherited
   component (cards, buttons, borders) flip to the app's palette on its own,
   so no component needs a dark-mode variant of its own.
   Palette matches src/ui/theme.h, so the site and the tuner app agree.     */
.jsp-dark {
    --bg: #14171c;
    --bg-alt: #1d2129;
    --surface: #1d2129;
    --ink: #e8ecf2;
    --ink-soft: #9aa4b2;
    --line: #2e3541;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 12px 30px -12px rgba(0, 0, 0, 0.7);
    background: var(--bg);
    color: var(--ink);
}
.jsp-dark h1,
.jsp-dark h2,
.jsp-dark h3 { color: var(--ink); }

/* ---- Nav over the dark hero -------------------------------------------
   main.js already toggles .scrolled past 8px; this only styles the
   not-yet-scrolled state, so no extra JS is needed.                       */
.site-nav--hero:not(.scrolled) { background: transparent; }
.site-nav--hero:not(.scrolled) .brand { color: #fff; }
.site-nav--hero:not(.scrolled) .nav-links a { color: rgba(255, 255, 255, 0.82); }
.site-nav--hero:not(.scrolled) .nav-links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}
.site-nav--hero:not(.scrolled) .nav-links .nav-cta a { color: #fff; background: var(--accent); }
.site-nav--hero:not(.scrolled) .nav-links .nav-cta a:hover { background: var(--accent-dark); }
.site-nav--hero:not(.scrolled) .nav-toggle span,
.site-nav--hero:not(.scrolled) .nav-toggle span::before,
.site-nav--hero:not(.scrolled) .nav-toggle span::after { background: #fff; }

/* ---- Hero -------------------------------------------------------------- */
.jsp-hero {
    position: relative;
    overflow: hidden;
    padding: calc(var(--nav-h) + clamp(56px, 8vw, 96px)) 0 clamp(56px, 8vw, 96px);
}
.jsp-hero-grid {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    align-items: center;
    gap: clamp(32px, 5vw, 64px);
}
.jsp-hero h1 {
    font-size: clamp(2.8rem, 7vw, 5rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}
.jsp-hero .jsp-lead {
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: var(--ink-soft);
    max-width: 30em;
    margin-bottom: 34px;
}
.jsp-hero-media { position: relative; display: grid; place-items: center; }
/* the red bloom that lifts the unit off the near-black background */
.jsp-hero-media::before {
    content: "";
    position: absolute;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(225, 29, 40, 0.30), rgba(225, 29, 40, 0) 68%);
    filter: blur(14px);
}
.jsp-hero-media img {
    position: relative;
    width: 100%;
    max-width: 560px;
    filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.65));
}

/* ---- Spec strip -------------------------------------------------------- */
.jsp-strip {
    background: #0f1216;
    border-top: 1px solid #23272f;
    border-bottom: 1px solid #23272f;
    padding: 20px 0;
}
.jsp-strip ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
}
.jsp-strip li {
    color: #9aa4b2;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
}
/* the separator dot doubles as the inter-item spacing */
.jsp-strip li::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    margin: 0 22px;
}
.jsp-strip li:last-child::after { display: none; }

/* ---- Comparison table -------------------------------------------------- */
/* radius and border live on the wrapper: a border-collapse table cannot
   clip its own rounded corners */
.jsp-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.jsp-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 1rem;
}
.jsp-table th,
.jsp-table td {
    padding: 14px 20px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}
.jsp-table thead th {
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
}
.jsp-table thead th:not(:first-child) { text-align: center; width: 22%; }
.jsp-table tbody td:not(:first-child) { text-align: center; }
.jsp-table tbody tr:last-child th,
.jsp-table tbody tr:last-child td { border-bottom: 0; }
.jsp-table tbody th {
    font-weight: 600;
    color: var(--ink);
}
.jsp-table tbody td { color: var(--ink-soft); }
.jsp-table tbody tr:nth-child(even) th,
.jsp-table tbody tr:nth-child(even) td { background: rgba(20, 23, 28, 0.025); }
.jsp-table .yes { color: #1a9b4b; font-weight: 700; }
.jsp-table .hi { color: var(--accent); font-weight: 700; }

/* ---- Figures / diagrams ------------------------------------------------ */
.jsp-fig { margin: 0; }
.jsp-figbox {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(12px, 2.5vw, 28px);
}
.jsp-fig img { width: 100%; display: block; }
.jsp-fig figcaption {
    margin-top: 14px;
    color: var(--ink-soft);
    font-size: 0.98rem;
    text-align: center;
}

/* two-column text + media block, used on the amplifier page */
.jsp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 60px);
    align-items: center;
}
.jsp-split h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-bottom: 18px; }
.jsp-split p { color: var(--ink-soft); margin-bottom: 14px; }
.jsp-split .hero-actions { margin-top: 26px; }
/* product shots here are studio images with generous framing; cap the height
   so a portrait photo cannot dictate the height of the whole row */
.jsp-split .jsp-fig img {
    width: auto;
    max-width: 100%;
    max-height: 400px;
    margin-inline: auto;
}

/* four short cards read better in one row than 3 + 1 orphan */
.capabilities--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .capabilities--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .capabilities--4 { grid-template-columns: 1fr; } }

/* the amplifier diagrams are denser than the JSpark ones and need more room
   before they stop being readable */
.jsp-fig--wide + .jsp-fig--wide { margin-top: 48px; }
.jsp-fig figcaption a { font-weight: 600; white-space: nowrap; }

/* trigger-wheel counting figures in the FAQ: square, so they pair up.
   The grid breaks out of the 760px article column so the tooth numbers
   stay readable, and the figures drop the article's photo styling in
   favour of the plain jsp-figbox frame. */
.jsp-wheels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    width: min(1060px, 94vw);
    margin: 28px calc((100% - min(1060px, 94vw)) / 2) 8px;
}
.article .jsp-wheels .jsp-fig {
    margin: 0;
    box-shadow: none;
    background: none;
    border-radius: 0;
    overflow: visible;
}
@media (max-width: 620px) { .jsp-wheels { grid-template-columns: 1fr; } }

/* ---- Pin tables -------------------------------------------------------- */
.jsp-pins {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.jsp-pin-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.jsp-pin-card h3 {
    font-size: 1.05rem;
    padding: 14px 20px;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
}
.jsp-pin-card h3 span { color: #9aa4b2; font-weight: 400; }
.jsp-pin-sub {
    padding: 12px 20px 6px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}
.jsp-pin-card table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.jsp-pin-card td {
    padding: 9px 20px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    vertical-align: top;
}
.jsp-pin-card tr:last-child td { border-bottom: 0; }
.jsp-pin-card td:first-child {
    width: 2.6em;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.jsp-pin-card td.unused { color: #98a0ac; font-style: italic; }
.jsp-pin-card td em { color: var(--accent); font-style: normal; white-space: nowrap; }

/* ---- Note / caveat box ------------------------------------------------- */
.jsp-note {
    margin-top: 28px;
    padding: 18px 22px;
    border-left: 3px solid var(--accent);
    background: rgba(225, 29, 40, 0.05);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--ink-soft);
    font-size: 0.98rem;
}
.jsp-note strong { color: var(--ink); }
.jsp-dark .jsp-note { background: rgba(225, 29, 40, 0.1); }

/* ---- App screenshots --------------------------------------------------- */
.jsp-shots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 3vw, 32px);
    margin-bottom: 40px;
}
.jsp-shots img {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 18px;
}
.jsp-dash img {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
}
.jsp-dash figcaption {
    margin-top: 14px;
    color: var(--ink-soft);
    font-size: 0.98rem;
}

/* ---- Ignitune brand band ------------------------------------------------ */
.jsp-brandband { padding: clamp(48px, 7vw, 72px) 0; }
.jsp-brandband-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
}
.jsp-brandband-inner img { height: 34px; width: auto; }
.jsp-brandband-inner p {
    color: var(--ink-soft);
    font-size: 1.05rem;
    max-width: 42em;
}

/* ---- Download cards ---------------------------------------------------- */
.jsp-dl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.jsp-dl-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
}
.jsp-dl-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.jsp-dl-card p { color: var(--ink-soft); font-size: 1rem; flex: 1; }
.jsp-dl-card .btn { margin-top: 22px; align-self: flex-start; }
.jsp-dl-card .meta {
    margin-top: 14px;
    font-size: 0.88rem;
    color: var(--ink-soft);
}
.jsp-soon {
    display: inline-block;
    align-self: flex-start;   /* the card is a flex column: don't stretch */
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(232, 163, 61, 0.16);
    color: #9a6b17;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 920px) {
    .jsp-split { grid-template-columns: 1fr; }
    .jsp-hero-grid { grid-template-columns: 1fr; }
    .jsp-hero-media { order: -1; }
    .jsp-hero-media img { max-width: 420px; }
    .jsp-pins { grid-template-columns: 1fr; }
    .jsp-dl { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    /* the mobile menu panel is white, so its links must stay dark even
       while the nav is still in its transparent over-hero state */
    .site-nav--hero:not(.scrolled) .nav-links a { color: var(--ink-soft); }
    .site-nav--hero:not(.scrolled) .nav-links a:hover {
        color: var(--ink);
        background: var(--bg-alt);
    }
    .site-nav--hero:not(.scrolled) .nav-links .nav-cta a { color: #fff; }

    .jsp-shots { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
    /* the strip wraps on narrow screens; a separator dot left dangling at the
       end of a line reads as a stray bullet, so space the items instead */
    .jsp-strip ul { gap: 6px 20px; }
    .jsp-strip li::after { display: none; }

    /* Squeezed to 390px the diagrams' labels drop to a few pixels tall, so
       hold them at a legible width and let the box scroll sideways instead.
       The caption stays outside the scroller. */
    .jsp-figbox {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 14px;
    }
    .jsp-fig img { min-width: 660px; }
    /* wiring examples carry far more small text, so they need a higher floor */
    .jsp-fig--wide img { min-width: 1100px; }
    .jsp-split .jsp-fig img { min-width: 0; }
    /* the trigger wheels are square, so they stay legible at full width */
    .jsp-wheels .jsp-fig img { min-width: 0; }
}

@media print {
    /* the wiring section is the part people print — drop the rest */
    .site-nav, .jsp-dark, .jsp-strip, .site-footer { display: none; }
    .jsp-fig img { border: 0; padding: 0; }
    .jsp-pins { grid-template-columns: repeat(3, 1fr); }
    .section { padding: 12px 0; }
}