/*
 * tailwind-patch-landing.css
 * ---------------------------
 * Second stopgap patch, specifically for landing.html.
 *
 * tailwind.css and tailwind-patch.css together still don't cover every
 * utility class landing.html uses. The missing ones are almost all
 * vertical-spacing and responsive-text classes, which is why the page
 * currently looks cramped/messy: every <section> on the page uses
 * "py-16 md:py-24" for its top/bottom padding, and neither class
 * exists yet, so sections have no breathing room and crash into each
 * other. The hero heading also never scales up past mobile size
 * because md:text-6xl / lg:text-7xl are missing.
 *
 * Same rule as before: this is a stopgap, not a fix. The real fix is
 * adding every template (including landing.html) to your Tailwind
 * content glob and rebuilding tailwind.css — then both patch files
 * become redundant.
 *
 * Include it AFTER tailwind.css and tailwind-patch.css:
 *   <link rel="stylesheet" href="/static/tailwind.css">
 *   <link rel="stylesheet" href="/static/tailwind-patch.css">
 *   <link rel="stylesheet" href="/static/tailwind-patch-landing.css">
 */

/* ---- Vertical section rhythm (the classes actually breaking the page) ---- */
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }

/* ---- Sizing / spacing ---- */
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.m-auto { margin: auto; }
.rounded-3xl { border-radius: 1.5rem; }
.font-black { font-weight: 900; }
.mt-12 { margin-top: 3rem; }
.mb-16 { margin-bottom: 4rem; }

/* ---- Hero feature-ticker strip: without these, the row has zero top
   margin and zero gap between its wrapped items, so it visually crashes
   straight into the buttons above it - same failure mode as everything
   else in this file. ---- */
.gap-x-8 { column-gap: 2rem; }
.gap-y-3 { row-gap: 0.75rem; }
.opacity-30 { opacity: 0.3; }

/* ---- Arbitrary-value colors used on the landing page's logo dot ---- */
.bg-\[\#2dd9e8\] { background-color: #2dd9e8; }
.shadow-\[0_0_8px_\#2dd9e8\] { box-shadow: 0 0 8px #2dd9e8; }

/* ---- Logo mark: flex sizing, transform origin, and the spin animation itself ---- */
.flex-shrink-0 { flex-shrink: 0; }
.origin-center { transform-origin: center; }

@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes spin-reverse-slower { to { transform: rotate(-360deg); } }
.animate-spin-slow { animation: spin-slow 8s linear infinite; }
.animate-spin-reverse-slower { animation: spin-reverse-slower 12s linear infinite; }

/* ---- Theme-color opacity variant missing from the base patch ---- */
.bg-\[var\(--cyan\)\]\/20 { background-color: color-mix(in srgb, var(--cyan) 20%, transparent); }

/* ---- Responsive: md (>=768px) ---- */
@media (min-width: 768px) {
    .md\:py-12 { padding-top: 3rem; padding-bottom: 3rem; }
    .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
    .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
    .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
}

/* ---- Responsive: lg (>=1024px) ---- */
@media (min-width: 1024px) {
    .lg\:text-7xl { font-size: 4.5rem; line-height: 1; }
}