.article p {
    margin: 0 0 17px 0;
    line-height: 1.65;
}

.article h2 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.625rem;
    line-height: 1.25;
    font-weight: 600;
    color: #01190e;
    margin: 2rem 0 1rem;
}

.article h2:first-child {
    margin-top: 0;
}

.article h3 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 600;
    color: #01190e;
    margin: 1.5rem 0 0.6rem;
}

.article ul,
.article ol {
    margin: 0 0 1rem 0;
    padding-left: 1.35rem;
}

.article ul { list-style: disc outside; }
.article ol { list-style: decimal outside; }

.article li {
    margin: 0.35rem 0;
    line-height: 1.6;
}

.article li::marker {
    color: #36b37e;
}

.article hr {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 2rem 0;
}

.article strong,
.article b {
    font-weight: 700;
    color: #01190e;
}

.article blockquote {
    margin: 1.25rem 0;
    padding: 0.75rem 1.25rem;
    border-left: 4px solid #36b37e;
    background: #f0fdf4;
    border-radius: 0 0.5rem 0.5rem 0;
    color: #14532d;
}

/* Info callouts */
.info-callout {
    border-left-width: 4px;
    border-left-style: solid;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}

.info-callout > :first-child { margin-top: 0; }
.info-callout > :last-child  { margin-bottom: 0; }

.info-callout-note    { background: #eff6ff; border-left-color: #60a5fa; color: #1e3a8a; }
.info-callout-warn    { background: #fffbeb; border-left-color: #f59e0b; color: #78350f; }
.info-callout-danger  { background: #fef2f2; border-left-color: #ef4444; color: #7f1d1d; }
.info-callout-success { background: #ecfdf5; border-left-color: #10b981; color: #064e3b; }

.info-callout strong,
.info-callout b { color: inherit; }

/* Info CTA button */
.info-cta {
    display: inline-block;
    background: #ff5033;
    color: #fff !important;
    padding: 0.65rem 1.4rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color .2s;
}

.info-cta:hover { background: #e6432a; }

/* Offer card photo: full-width 16:10 on mobile, fixed 200x200 on sm+ */
.offer-card-photo {
    aspect-ratio: 16 / 10;
    width: 100%;
}
@media (min-width: 640px) {
    .offer-card-photo {
        aspect-ratio: auto;
        width: 200px;
        height: 200px;
    }
}

/* Archived offer styling */
.offer-archived {
    filter: grayscale(60%);
    opacity: 0.78;
    transition: opacity .2s, filter .2s;
}

.offer-archived:hover {
    filter: grayscale(30%);
    opacity: 0.95;
}

/* Amber utilities (for archived banner on offer detail) */
.border-amber-500 { border-color: #f59e0b; }
.bg-amber-50 { background-color: #fffbeb; }
.text-amber-900 { color: #78350f; }
.text-amber-900\/80 { color: rgba(120, 53, 15, 0.8); }

.article .article-single__photo {
    padding-bottom: 17px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.article .article-single__photo img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

.article .article-single__photo figcaption {
    text-align: center;
    color: grey;
    font-size: 13px;
    padding: 10px 0 0;
}

.article a {
    color: #ff5033;
}

.article a:hover {
    text-decoration: underline;
}

.footer-logo img {
    filter: grayscale(100%) brightness(1.15);
    transition: filter 0.25s ease;
}

.footer-logo:hover img {
    filter: grayscale(55%) brightness(1.05);
}

.peer-focus\:hidden:is(:where(.peer):focus ~ *),
.peer-focus\:hidden:is(:where(.peer):not(:placeholder-shown) ~ *) {
    display: none;
}

.review-text p {
    margin: 5px 0;
}

.bg-green-500 { background-color: #22c55e; }
.bg-yellow-500 { background-color: #eab308; }
.bg-red-500 { background-color: #ef4444; }

.text-green-600 { color: #16a34a; }

@media (min-width: 768px) {
  .md\:ml-5 {
    margin-left: 1.25rem;
  }
  .md\:justify-self-start {
    justify-self: start;
  }
}

.hover\:text-orange-500:hover {
  color: #f97316;
}

@media (min-width: 1280px) {
  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* =========================================================================
   Tailwind utilities missing from main.css (identified in CSS audit 2026-04-21).
   These classes are referenced in templates but absent from the compiled
   main.css (it was generated from a different project and doesn't know about
   Tailwind utilities used here). Added manually until a proper Tailwind
   build pipeline is set up.
   ========================================================================= */

/* Colors: text */
.text-orange-600 { color: #ea580c; }
.text-red-700 { color: #b91c1c; }
.text-amber-800 { color: #92400e; }
.text-gray-300 { color: #d1d5db; }
.text-bright-celadon-700 { color: #047857; }

/* Colors: backgrounds */
.bg-amber-100 { background-color: #fef3c7; }
.bg-red-100 { background-color: #fee2e2; }
.bg-bright-celadon-50 { background-color: #f0fdf4; }
.bg-gray-700\/80 { background-color: rgba(55, 65, 81, 0.8); }

/* Colors: borders */
.border-l-4 { border-left-width: 4px; }
.border-bright-celadon-100\/10 { border-color: rgba(245, 255, 247, 0.1); }
.ring-bright-celadon-300 { box-shadow: 0 0 0 2px #d9fce3; }
.divide-gray-100 > * + * { border-color: #f3f4f6; }

/* Typography */
.leading-snug { line-height: 1.375; }
.tracking-wide { letter-spacing: 0.025em; }
.whitespace-pre-line { white-space: pre-line; }
.align-text-bottom { vertical-align: text-bottom; }
.text-md { font-size: 1rem; line-height: 1.5rem; }
.text-8xl { font-size: 6rem; line-height: 1; }
.text-\[10px\] { font-size: 10px; }
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Effects */
.opacity-40 { opacity: 0.4; }
.cursor-zoom-in { cursor: zoom-in; }
.scroll-mt-20 { scroll-margin-top: 5rem; }

/* Size & spacing */
.h-24 { height: 6rem; }
.h-32 { height: 8rem; }
.h-48 { height: 12rem; }
.size-20 { width: 5rem; height: 5rem; }
.max-h-40 { max-height: 10rem; }
.max-w-\[200px\] { max-width: 200px; }
.gap-y-1\.5 { row-gap: 0.375rem; }
.ml-4 { margin-left: 1rem; }
.pl-6 { padding-left: 1.5rem; }
.pr-4 { padding-right: 1rem; }
.pr-24 { padding-right: 6rem; }
.pt-10 { padding-top: 2.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }

/* Hover states */
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.hover\:bg-orange-50:hover { background-color: #fff7ed; }
.hover\:bg-white:hover { background-color: #ffffff; }
.hover\:border-orange-200:hover { border-color: #fed7aa; }
.hover\:border-orange-300:hover { border-color: #fdba74; }
.hover\:border-orange-400:hover { border-color: #fb923c; }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
.hover\:text-orange-600:hover { color: #ea580c; }

/* Focus states */
.focus-within\:shadow-lg:focus-within { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.focus\:border-deep-forest-900:focus { border-color: #01190e; }

/* Group/peer modifiers */
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:text-orange-600 { color: #ea580c; }
.group:hover .group-hover\:text-orange-700 { color: #c2410c; }
.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }
details[open] .group-open\:rotate-180,
[data-state="open"] .group-open\:rotate-180 { transform: rotate(180deg); }

/* Responsive: sm (>=640px) */
@media (min-width: 640px) {
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sm\:p-5 { padding: 1.25rem; }
}

/* Responsive: md (>=768px) */
@media (min-width: 768px) {
  .md\:py-0 { padding-top: 0; padding-bottom: 0; }
  .md\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .md\:py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .md\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
  .md\:mt-1 { margin-top: 0.25rem; }
  .md\:mt-16 { margin-top: 4rem; }
  .md\:mb-7 { margin-bottom: 1.75rem; }
  .md\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .md\:translate-y-2\.5 { transform: translateY(0.625rem); }
  .md\:c-text-xl {
    font-family: 'Noto Sans', sans-serif;
    font-size: var(--font-size-xl);
    line-height: var(--tw-leading, var(--line-height-xl));
    font-weight: var(--font-weight-medium);
  }
}

/* Responsive: lg (>=1024px) */
@media (min-width: 1024px) {
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg\:grid-cols-\[1fr_280px\] { grid-template-columns: 1fr 280px; }
  .lg\:grid-cols-\[1fr_380px\] { grid-template-columns: 1fr 380px; }
  .lg\:order-1 { order: 1; }
  .lg\:order-2 { order: 2; }
  .lg\:pt-12 { padding-top: 3rem; }
}
