/* Static replacement for the cdn.tailwindcss.com runtime.
   Covers exactly the utility classes this page uses, plus the page's own rules.
   Regenerate by hand if new classes are added to the markup. */

/* ---- preflight subset (matches Tailwind's base reset) ---- */
*, ::before, ::after { box-sizing: border-box; border: 0 solid #e5e7eb; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { margin: 0; line-height: inherit; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }
p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; vertical-align: middle; max-width: 100%; height: auto; }
button, input, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; }
button { background-color: transparent; background-image: none; cursor: pointer; }
textarea { resize: vertical; }
:root { --tw-ring-color: rgb(59 130 246 / 1); }

/* ---- layout ---- */
.container { width: 100%; }
@media (min-width: 640px)  { .container { max-width: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } }

.block { display: block; }
.hidden { display: none; }
.inline { display: inline; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---- spacing ---- */
.m-2 { margin: 0.5rem; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.-mt-2 { margin-top: -0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.p-4 { padding: 1rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.pt-4 { padding-top: 1rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-4 { padding-bottom: 1rem; }
.pl-2 { padding-left: 0.5rem; }

/* ---- sizing ---- */
.w-full { width: 100%; }
.w-12 { width: 3rem; }
.w-24 { width: 6rem; }
.h-8 { height: 2rem; }
.h-12 { height: 3rem; }
.h-24 { height: 6rem; }
.size-6 { width: 1.5rem; height: 1.5rem; }

/* ---- type ---- */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.font-light { font-weight: 300; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.capitalize { text-transform: capitalize; }
.list-disc { list-style-type: disc; }
.text-white { color: #fff; }
.text-gray-700 { color: #374151; }
.text-slate-500 { color: #64748b; }

/* ---- borders / effects ---- */
.border { border-width: 1px; }
.border-solid { border-style: solid; }
.border-gray-300 { border-color: #d1d5db; }
.rounded-md { border-radius: 0.375rem; }
.bg-blue-500 { background-color: #3b82f6; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.ring-1 { box-shadow: 0 0 0 1px var(--tw-ring-color); }
.ring-blue-500 { --tw-ring-color: rgb(59 130 246 / 1); }

/* ---- responsive ---- */
@media (min-width: 640px) {
  .sm\:w-full { width: 100%; }
  .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
}
@media (min-width: 768px) {
  .md\:block { display: block; }
}
@media (min-width: 1024px) {
  .lg\:grid { display: grid; }
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- page styles ---- */
.open-sans-300 {
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

/* 4.5 green stars, inlined. Replaces the 45 KB all_stars.svg sprite. */
.rating { height: 15px; }
.rating .rating-info {
  display: inline-block;
  width: 88px;
  height: 15px;
  background-repeat: no-repeat;
  background-size: 88px 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 15'%3E%3Cdefs%3E%3ClinearGradient id='h'%3E%3Cstop offset='50%25' stop-color='%234CAF50'/%3E%3Cstop offset='50%25' stop-color='%23d5d5d5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='%234CAF50' d='M7.5 0l2.2 4.6 5 .7-3.6 3.6.9 5-4.5-2.4L3 13.9l.9-5L.3 5.3l5-.7z'/%3E%3Cpath fill='%234CAF50' transform='translate(18.25)' d='M7.5 0l2.2 4.6 5 .7-3.6 3.6.9 5-4.5-2.4L3 13.9l.9-5L.3 5.3l5-.7z'/%3E%3Cpath fill='%234CAF50' transform='translate(36.5)' d='M7.5 0l2.2 4.6 5 .7-3.6 3.6.9 5-4.5-2.4L3 13.9l.9-5L.3 5.3l5-.7z'/%3E%3Cpath fill='%234CAF50' transform='translate(54.75)' d='M7.5 0l2.2 4.6 5 .7-3.6 3.6.9 5-4.5-2.4L3 13.9l.9-5L.3 5.3l5-.7z'/%3E%3Cpath fill='url(%23h)' transform='translate(73)' d='M7.5 0l2.2 4.6 5 .7-3.6 3.6.9 5-4.5-2.4L3 13.9l.9-5L.3 5.3l5-.7z'/%3E%3C/g%3E%3C/svg%3E");
}

.btn-container {
  display: flex;
  align-items: center;
  min-width: 200px;
  width: 200px;
  padding-left: 20px;
}

.download-button {
  text-align: center;
  border-radius: 3px;
  background-color: #3971E0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  transition: all .4s cubic-bezier(.2, .57, .36, .8);
  cursor: pointer;
  text-decoration: none;
}

.animation-pulse { box-shadow: 0 0 0 0 rgba(90, 153, 212, .5); animation: a 1.5s infinite; }
.animation-pulse:hover { animation: none; }
@keyframes a {
  0%  { transform: scale(.9); }
  70% { transform: scale(1); box-shadow: 0 0 0 50px rgba(90, 153, 212, 0); }
  to  { transform: scale(.9); box-shadow: 0 0 0 0 rgba(90, 153, 212, 0); }
}
@media (prefers-reduced-motion: reduce) { .animation-pulse { animation: none; } }

/* ---- header / first-screen tuning ---- */
.site-header { background: #333; }
.site-header nav { min-height: 48px; }
.site-main { background: #fefefe; border: 2px solid #ddd; margin-top: 0; padding-top: 0; }

/* Reserve the first ad's height so its late fill does not shove the CTA down. */
.ad-top { display: block; min-height: 280px; }
@media (min-width: 768px) { .ad-top { min-height: 90px; } }

/* The decorative background is only ever visible beside the container on wide
   screens; mobile never sees it, so it is not downloaded there. */
body { background-color: #eee; }
@media (min-width: 1024px) {
  body { background-image: url('./images/uploads/bg.webp'); }
}