/* ============================================================
   Apps page (/apps) — v2
   Marketing surface. Announces the VoltaAI mobile app
   (Android live on Google Play, iOS coming soon).

   Shell classes (.hero, .v2-*, .section-h2) come from
   foundation.css + components.css + the shared welcome hero.
   This file adds: store badges, the open-testing callout, and
   ports the sec-head / bento / cta2 / faq patterns the gateway
   components.css does not already define.
   ============================================================ */

/* Hero tweaks ------------------------------------------------ */
.hero-title { max-width: 16ch; }
.hero-note {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.03em;
    color: var(--ink-500);
    margin: var(--s-6) 0 0;
}

/* Store badges ---------------------------------------------- */
.store-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4);
    margin: 0 0 var(--s-10);
}
.store-badge { display: inline-flex; text-decoration: none; border-radius: var(--r-lg); }
.store-badge svg { height: 58px; width: auto; display: block; }
.store-badge:not(.store-badge--soon) {
    transition: transform var(--dur-base) var(--ease-out);
}
.store-badge:not(.store-badge--soon):hover { transform: translateY(-2px); }
.store-badge--soon { opacity: 0.5; cursor: default; pointer-events: none; }

/* Section head (ported) ------------------------------------- */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-8); margin-bottom: var(--s-10); }
.sec-head__l { max-width: 64ch; display: flex; flex-direction: column; gap: var(--s-4); }
.sec-head__l h2 { font-size: var(--t-h4); }
.sec-head__l p { color: var(--ink-500); font-size: var(--t-md); max-width: 60ch; }
.sec-head__more { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-400); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); white-space: nowrap; }
@media (max-width: 720px) { .sec-head { flex-direction: column; align-items: flex-start; gap: var(--s-4); } }

/* Bento grid (ported) --------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.bento__cell {
    display: flex; flex-direction: column; gap: var(--s-2);
    padding: var(--s-6); background: var(--paper-0); border: var(--hairline); border-radius: var(--r-lg);
    text-decoration: none;
    transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.bento__cell:hover { border-color: var(--ink-900); }
.bento__cell .ic { width: 22px; height: 22px; color: var(--ink-900); margin-bottom: var(--s-2); }
.bento__cell h3 { font-size: var(--t-h6); font-weight: 600; }
.bento__cell p { font-size: var(--t-sm); color: var(--ink-500); line-height: var(--lh-base); }
.bento__stat { margin-top: auto; padding-top: var(--s-3); font-family: var(--font-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--ink-400); }
.bento__stat b { color: var(--ink-900); font-variant-numeric: tabular-nums; }
.bento__cell--lg { grid-row: span 2; }
.bento__cell--wide { grid-column: span 2; }
.bento__cell--accent { border-color: var(--signal); }
.bento__cell--accent .ic { color: var(--signal); }
.bento__cell--accent:hover { border-color: var(--signal-strong); background: var(--signal-soft); }
.bento__cell--accent .bento__stat b { color: var(--signal-strong); }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento__cell--lg { grid-row: auto; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .bento__cell--wide { grid-column: auto; } }

/* Open-testing callout -------------------------------------- */
.ot-callout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-8);
    background: var(--paper-0);
    border: var(--hairline);
    border-radius: var(--r-lg);
    padding: var(--s-10) var(--s-8);
}
.ot-callout__l { display: flex; flex-direction: column; gap: var(--s-4); max-width: 60ch; }
.ot-callout__l h2 { font-size: var(--t-h5); }
.ot-callout__l p { color: var(--ink-500); font-size: var(--t-md); }
.ot-callout__l .v2-badge { align-self: flex-start; }
@media (max-width: 720px) { .ot-callout { grid-template-columns: 1fr; gap: var(--s-6); } }

/* CTA block (ported) ---------------------------------------- */
.cta2 { text-align: center; background: var(--paper-0); border: var(--hairline); border-radius: var(--r-lg); padding: var(--s-16) var(--s-8); display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.cta2 h2 { font-size: var(--t-h4); }
.cta2 p { color: var(--ink-500); font-size: var(--t-md); max-width: 56ch; }
.cta2 .store-badges { margin: var(--s-4) 0 0; justify-content: center; }

/* FAQ (ported; JS toggles .active + inline max-height) ------ */
.faq { display: flex; flex-direction: column; }
.faq__item { border-top: var(--hairline); }
.faq__item:last-child { border-bottom: var(--hairline); }
.faq__question {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); width: 100%;
    text-align: left; padding: var(--s-5) 0; font-size: var(--t-md); font-weight: 500; color: var(--ink-900);
    background: none; border: none; cursor: pointer; font-family: var(--font-sans);
}
.faq__icon { display: inline-flex; width: 18px; height: 18px; color: var(--ink-400); flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); }
.faq__icon svg { width: 18px; height: 18px; }
.faq__item.active .faq__icon { transform: rotate(45deg); color: var(--signal); }
.faq__answer { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-out); }
.faq__answer p { color: var(--ink-500); font-size: var(--t-md); max-width: 72ch; }
.faq__answer-inner { padding-bottom: var(--s-5); }
.faq__answer-inner p { padding-bottom: 0; }

/* Section rhythm -------------------------------------------- */
.apps-mockups { padding-top: var(--s-12); }
.apps-mockups .sec-head { text-align: center; }
.apps-mockups .sec-head__l { max-width: none; align-items: center; margin: 0 auto; }

/* Responsive nav ---------------------------------------------
   The mobile-menu-btn base (display:none) and the <=768 collapse
   breakpoint live per-page in the gateway (welcome.css etc.), NOT in
   components.css — which only styles the OPEN sheet (.mobile-nav:not([hidden]))
   and the [hidden] guard. This page loads neither, so it carries its own copy. */
.mobile-menu-btn {
    display: none;
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid var(--paper-200);
    border-radius: var(--r-md);
    align-items: center; justify-content: center;
    cursor: pointer;
}
.mobile-menu-btn:hover { background: var(--paper-100); }

@media (max-width: 768px) {
    .v2-nav-links { display: none; }
    .mobile-menu-btn { display: inline-flex; }
    .hero { padding: var(--s-12) var(--s-4) var(--s-10); }
    .cta2 { padding: var(--s-12) var(--s-5); }
}