/* =====================================================================
   "Market Street" theme — colorful, friendly, stall-based styling for
   PDF Tools, Image Tools, and individual tool pages that opt in. Plain
   hand-written CSS, not Tailwind utility classes, so it needs no purge
   step — see public/css/home.css for the same pattern on the homepage.
   Loaded per-page via <link>, alongside the site's existing style.min.css
   (header/footer/base layout stay on the existing theme).
   ===================================================================== */

.ms-page { font-family: 'Inter', sans-serif; color: #241F1A; background: #FFFBF5; -webkit-font-smoothing: antialiased; }
.ms-page a { text-decoration: none; }
.ms-disp { font-family: 'Baloo 2', sans-serif; }
.ms-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ---- breadcrumb ---- */
.ms-crumb { font-size: 13px; padding: 18px 0; color: #8A7F6E; }
.ms-crumb a { color: #FF7A45; font-weight: 600; }
.ms-crumb a:hover { text-decoration: underline; }
.ms-crumb span.sep { margin: 0 8px; color: #D8CBB5; }

/* ---- hero ---- */
.ms-hero { padding: 36px 0 44px; text-align: center; }
.ms-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: #FFE4D4; color: #C2410C; font-size: 12.5px; font-weight: 700; padding: 8px 16px; border-radius: 999px; margin-bottom: 20px; }
.ms-hero h1 { font-family: 'Baloo 2', sans-serif; font-size: 42px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 16px; color: #241F1A; }
.ms-hero p { font-size: 17px; line-height: 1.6; color: #5A5248; max-width: 620px; margin: 0 auto; }

/* ---- buttons ---- */
.ms-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; padding: 14px 26px; border-radius: 14px; border: 2px solid transparent; cursor: pointer; font-family: 'Inter', sans-serif; }
.ms-btn-primary { background: #FF7A45; color: #fff; box-shadow: 0 10px 22px -8px rgba(255,122,69,.5); }
.ms-btn-primary:hover { background: #F4642C; }
.ms-btn-ghost { background: #fff; color: #241F1A; border-color: #F0E6D8; }
.ms-btn-ghost:hover { border-color: #FF7A45; color: #FF7A45; }
.ms-btn-dark { background: #241F1A; color: #FFFBF5; }
.ms-btn-dark:hover { background: #352D25; }

/* ---- search ---- */
.ms-search { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid #F0E6D8; border-radius: 14px; padding: 13px 18px; max-width: 560px; margin: 0 auto 28px; }
.ms-search svg { color: #8A7F6E; flex-shrink: 0; }
.ms-search input { flex: 1; min-width: 0; border: none; outline: none; font-size: 14.5px; color: #241F1A; background: transparent; font-family: 'Inter', sans-serif; }
.ms-search input::placeholder { color: #8A7F6E; }

/* ---- stall section headings ---- */
.ms-group { margin: 0 0 32px; scroll-margin-top: 92px; }
.rd-cat-block { scroll-margin-top: 92px; }
#gov-forms-section { scroll-margin-top: 92px; }
.ms-group:last-child { margin-bottom: 0; }
.ms-group h4 { font-family: 'Baloo 2', sans-serif; font-size: 15.5px; font-weight: 700; color: #241F1A; margin: 0 0 14px; display: flex; align-items: center; gap: 9px; }
.ms-group h4 .dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }

/* ---- tool card grid ---- */
.ms-tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.ms-tool-card { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 2px solid #F0E6D8; border-radius: 16px; padding: 20px; min-height: 120px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.ms-tool-card:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -18px rgba(36,31,26,.25); border-color: #F0E6D8; }
.ms-tool-card__icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ms-tool-card h5 { font-family: 'Baloo 2', sans-serif; font-size: 14.5px; font-weight: 700; margin: 0; line-height: 1.35; color: #241F1A; }
.ms-tool-card p { font-size: 12.5px; color: #8A7F6E; margin: 0; line-height: 1.5; }

/* stall accent colors — used on .dot, .ms-tool-card__icon backgrounds, text */
.ms-c-orange  { background: #FFE4D4; color: #C2410C; }
.ms-c-teal    { background: #D6F5EF; color: #0D9488; }
.ms-c-pink    { background: #FCE7F3; color: #BE185D; }
.ms-c-blue    { background: #DBEAFE; color: #1D4ED8; }
.ms-c-purple  { background: #EDE5FE; color: #7C3AED; }
.ms-c-amber   { background: #FDECC8; color: #B45309; }
.ms-c-green   { background: #D1FAE5; color: #059669; }
.ms-c-red     { background: #FEE2E2; color: #B91C1C; }
.dot.ms-c-orange { background: #FF7A45; }
.dot.ms-c-teal { background: #14B8A6; }
.dot.ms-c-pink { background: #EC4899; }
.dot.ms-c-blue { background: #3B82F6; }
.dot.ms-c-purple { background: #8B5CF6; }
.dot.ms-c-amber { background: #F59E0B; }
.dot.ms-c-green { background: #10B981; }
.dot.ms-c-red { background: #EF4444; }

/* ---- conversion matrix (Image Tools "Convert formats") ---- */
.ms-matrix { background: #fff; border: 2px solid #F0E6D8; border-radius: 18px; padding: 26px 30px; }
.ms-matrix__cols { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 22px; }
.ms-matrix__col-title { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; padding: 4px 9px; border-radius: 7px; margin: 0 0 12px; }
.ms-matrix__link { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #5A5248; padding: 6px 0; }
.ms-matrix__link:hover { color: #241F1A; }
.ms-matrix__link svg { color: #C9BCA3; flex-shrink: 0; }
.ms-matrix__note { margin-top: 16px; padding-top: 16px; border-top: 1px dashed #F0E6D8; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #241F1A; }

/* ---- empty state ---- */
.ms-empty { display: none; text-align: center; color: #8A7F6E; font-size: 14px; padding: 40px 16px; border: 2px dashed #F0E6D8; border-radius: 16px; }

/* ---- dropzone / upload (single-tool pages) ---- */
.ms-dropzone { border: 2.5px dashed #F0C9A8; background: #fff; border-radius: 20px; padding: 56px 24px; text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.ms-dropzone:hover, .ms-dropzone.is-drag { border-color: #FF7A45; background: #FFF7F1; }
.ms-dropzone__icon { font-size: 44px; margin-bottom: 14px; }
.ms-dropzone__title { font-family: 'Baloo 2', sans-serif; font-size: 19px; font-weight: 700; color: #241F1A; margin: 0 0 6px; }
.ms-dropzone__sub { font-size: 13.5px; color: #8A7F6E; margin: 0; }

/* ---- generic white card ---- */
.ms-card { background: #fff; border: 2px solid #F0E6D8; border-radius: 20px; padding: 32px; }
.ms-card-tight { background: #fff; border: 2px solid #F0E6D8; border-radius: 16px; padding: 22px; }

/* ---- step numbers ---- */
.ms-step-num { width: 38px; height: 38px; border-radius: 999px; background: #FF7A45; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: 'Baloo 2', sans-serif; margin: 0 auto 14px; }

/* ---- section kicker ---- */
.ms-kicker { font-family: 'Baloo 2', sans-serif; font-size: 13.5px; font-weight: 700; color: #FF7A45; margin-bottom: 14px; }
.ms-section-title { font-family: 'Baloo 2', sans-serif; font-size: 26px; font-weight: 700; color: #241F1A; margin: 0 0 8px; }

/* ---- FAQ accordion (restyled, same .faq-item/.faq-header-pro JS hooks) ---- */
.ms-page .faq-item { border: 2px solid #F0E6D8; border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.ms-page .faq-header-pro { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; cursor: pointer; font-weight: 700; font-size: 14.5px; color: #241F1A; }
.ms-page .faq-item.active .faq-header-pro { color: #FF7A45; }
.ms-page .faq-body-pro { padding: 0 20px 18px; font-size: 13.5px; color: #5A5248; line-height: 1.6; }
.ms-page .toggle-icon-box { width: 20px; height: 20px; position: relative; flex-shrink: 0; }
.ms-page .line-horizontal, .ms-page .line-vertical { position: absolute; background: #8A7F6E; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ms-page .line-horizontal { width: 12px; height: 2px; }
.ms-page .line-vertical { width: 2px; height: 12px; transition: transform .2s ease; }
.ms-page .faq-item.active .line-vertical { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

/* ---- select (page-size / preset dropdowns on tool pages) ---- */
.ms-select { width: 100%; padding: 12px 14px; border: 1.5px solid #F0E6D8; border-radius: 12px; background: #F8F4EC; font-size: 14px; color: #241F1A; font-family: 'Inter', sans-serif; }
.ms-input { width: 100%; padding: 12px 14px; border: 1.5px solid #F0E6D8; border-radius: 12px; background: #fff; font-size: 14px; color: #241F1A; font-family: 'Inter', sans-serif; }
.ms-input:focus, .ms-select:focus { outline: none; border-color: #FF7A45; }
.ms-label { display: block; font-size: 13px; font-weight: 700; color: #241F1A; margin-bottom: 8px; }

/* ---- angle / option pill buttons (rotate-pdf) ---- */
.ms-angle-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 22px; border-radius: 14px; border: 2px solid #F0E6D8; background: #fff; color: #5A5248; font-weight: 700; font-family: 'Inter', sans-serif; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.ms-angle-btn.is-selected { border-color: #FF7A45; background: #FFF3E8; color: #FF7A45; }

/* ---- draggable page chip (reorder-pdf-pages) ---- */
.ms-page .rp-chip { width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; cursor: grab; user-select: none; background: #fff; border: 2px solid #F0E6D8; border-radius: 14px; box-shadow: none; font-weight: 700; color: #241F1A; font-family: 'Inter', sans-serif; transition: border-color .15s ease, background .15s ease; }
.ms-page .rp-chip:active { cursor: grabbing; }
.ms-page .rp-chip.rp-dragging { opacity: .4; }
.ms-page .rp-chip.rp-over { border-color: #FF7A45 !important; background-color: #FFF3E8 !important; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .ms-tool-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ms-matrix__cols { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px 16px; }
}
@media (max-width: 640px) {
  .ms-wrap { padding: 0 18px; }
  .ms-hero { padding: 24px 0 30px; }
  .ms-hero h1 { font-size: 30px; }
  .ms-hero p { font-size: 15px; }
  .ms-tool-grid { grid-template-columns: 1fr; }
  .ms-matrix__cols { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 14px; }
  .ms-dropzone { padding: 36px 18px; }
  .ms-card { padding: 22px; }
}

/* =====================================================================
   HEADER — restyles views/partials/header.ejs. Functional classes/ids
   the shared footer.ejs <script> depends on are left completely alone
   (.nav-dropdown, .nav-trigger, .nav-menu-panel, #mobile-menu,
   .menu-btn/.close-btn, .menu-icon/.close-icon, .custom-select,
   .select-box, .options, opacity-0/invisible/pointer-events-none/
   hidden/overflow-hidden Tailwind utilities) — ms- classes are added
   alongside them purely for appearance.
   ===================================================================== */
.ms-header { background: #FFFBF5; border-bottom: 1px solid #F0E6D8; }
.ms-header-inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ms-logo-mark { width: 34px; height: 34px; border-radius: 10px; background: #FF7A45; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ms-logo-text { font-family: 'Baloo 2', sans-serif; font-size: 19px; font-weight: 700; color: #241F1A; white-space: nowrap; }

.ms-nav-link { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .02em; text-transform: uppercase; color: #5A5248; display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; }
.ms-nav-link:hover { color: #FF7A45; }
.ms-nav-item:hover .ms-nav-link { color: #FF7A45; }

.ms-nav-panel { background: #fff; border: 1px solid #F0E6D8; box-shadow: 0 24px 50px -16px rgba(36,31,26,.22); border-radius: 0 0 20px 20px; padding: 28px; display: flex; }
.ms-nav-col { padding: 0 24px; border-right: 1px solid #F4EDE0; min-width: 170px; }
.ms-nav-col:last-child { border-right: none; }
.ms-nav-col__title { font-family: 'Baloo 2', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 14px; display: flex; align-items: center; gap: 7px; }
.ms-nav-col a.ms-nav-sub { display: block; padding: 7px 0; font-size: 13.5px; color: #5A5248; font-weight: 500; }
.ms-nav-col a.ms-nav-sub:hover { color: #241F1A; text-decoration: underline; }

.ms-search-trigger { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1.5px solid #F0E6D8; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #5A5248; background: none; cursor: pointer; }
.ms-search-trigger:hover { border-color: #FF7A45; color: #FF7A45; }
.ms-kbd { font-size: 10.5px; border: 1px solid #E3DCCC; border-radius: 4px; padding: 1px 5px; color: #8A7F6E; }

.ms-lang-box { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #5A5248; cursor: pointer; }
.ms-lang-panel { background: #fff; border: 1px solid #F0E6D8; box-shadow: 0 20px 44px -16px rgba(36,31,26,.22); border-radius: 0 0 16px 16px; padding: 18px; }
.ms-lang-panel a { display: block; padding: 7px 0; font-size: 13.5px; color: #5A5248; font-weight: 500; white-space: nowrap; }
.ms-lang-panel a:hover { color: #FF7A45; }

.ms-menu-btn { width: 40px; height: 40px; border-radius: 12px; background: #FFF3E8; display: flex; align-items: center; justify-content: center; }

.ms-mobile-menu { background: #FFFBF5; border-top: 1px solid #F0E6D8; }
.ms-mobile-section { padding: 20px 20px 0; }
.ms-mobile-section + .ms-mobile-section { border-top: 1px solid #F0E6D8; margin-top: 20px; }
.ms-mobile-kicker { display: flex; align-items: center; gap: 8px; font-family: 'Baloo 2', sans-serif; font-size: 11.5px; font-weight: 700; color: #8A7F6E; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px; }
.ms-mobile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; font-size: 13.5px; font-weight: 600; color: #241F1A; padding-bottom: 20px; }
.ms-mobile-grid a { color: #241F1A; }
.ms-mobile-grid a:hover { color: #FF7A45; }

.ms-search-overlay { position: fixed; inset: 0; background: rgba(36,31,26,.55); z-index: 100; padding: 9vh 16px; }
.ms-search-modal { max-width: 560px; margin: 0 auto; background: #fff; border-radius: 18px; box-shadow: 0 30px 70px rgba(36,31,26,.35); overflow: hidden; }
.ms-search-modal__bar { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid #F0E6D8; }
.ms-search-modal__bar input { flex: 1; border: 0; font-size: 16px; outline: none; color: #241F1A; font-family: 'Inter', sans-serif; }
.ms-search-result { display: block; padding: 11px 14px; border-radius: 12px; text-decoration: none; color: #241F1A; font-size: 14px; font-weight: 600; }
.ms-search-result span { display: block; font-size: 12px; color: #8A7F6E; font-weight: 400; }
.ms-search-result.is-active { background: #FFF3E8; }

@media (max-width: 480px) {
  .ms-header-inner { padding: 0 14px; gap: 6px; }
  .ms-logo-text { font-size: 16px; }
  .ms-logo-mark { width: 30px; height: 30px; }
  .ms-lang-box .selected { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ms-search-trigger { padding: 8px; }
  .ms-search-trigger .ms-kbd { display: none; }
  .ms-menu-btn { width: 36px; height: 36px; }
}

/* =====================================================================
   FOOTER — restyles views/partials/footer.ejs. The review-modal markup,
   its <form> ids and the reCAPTCHA widget are untouched (same ids:
   reviewModal, reviewForm, toolId, reviewerName, starRating,
   selectedRating, reviewerComment, submitReviewBtn) - only colors/
   layout of the visible footer content changed.
   ===================================================================== */
.ms-footer { background: #241F1A; color: #E7DECE; }
.ms-footer-grid { max-width: 1240px; margin: 0 auto; padding: 64px 24px 44px; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 60px; }
.ms-footer-tagline { font-size: 14px; line-height: 1.7; color: #B8AFA0; max-width: 360px; margin: 0 0 22px; }
.ms-footer-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,122,69,.12); border: 1px solid rgba(255,122,69,.3); color: #FFB088; font-size: 11.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; }
.ms-footer-col__title { font-family: 'Baloo 2', sans-serif; font-size: 13.5px; font-weight: 700; color: #FFFBF5; margin: 0 0 18px; }
.ms-footer-links { display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; }
.ms-footer-links a { color: #B8AFA0; }
.ms-footer-links a:hover { color: #FF7A45; }
.ms-footer-bottom { max-width: 1240px; margin: 0 auto; padding: 26px 24px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.ms-footer-bottom p { font-size: 12.5px; color: #8A7F6E; line-height: 1.6; margin: 0; }
.ms-footer-bottom strong { color: #B8AFA0; }

/* =====================================================================
   HOMEPAGE — restyles views/pages/home.ejs on top of .ms-page.
   ===================================================================== */
.ms-home-hero { padding: 64px 0 56px; }
.ms-home-hero-grid { display: grid; grid-template-columns: 1fr 460px; gap: 56px; align-items: center; }
.ms-home-hero h1 { font-family: 'Baloo 2', sans-serif; font-size: 52px; font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 22px; color: #241F1A; }
.ms-home-hero p.ms-lede { font-size: 17.5px; line-height: 1.65; color: #5A5248; max-width: 480px; margin: 0 0 32px; }
.ms-home-trust-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; }
.ms-home-trust-row span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #8A7F6E; }
.ms-home-trust-row svg { color: #10B981; flex-shrink: 0; }

.ms-window { background: #241F1A; border-radius: 22px; padding: 26px; box-shadow: 0 30px 60px -20px rgba(36,31,26,.45); }
.ms-window__bar { display: flex; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid #3A3028; margin-bottom: 18px; }
.ms-window__dot { width: 9px; height: 9px; border-radius: 999px; background: #4A3D30; }
.ms-window__dropzone { border: 1.5px dashed #5A4C3C; border-radius: 14px; padding: 30px 18px; text-align: center; background: #2E2419; }
.ms-window__dropzone svg { color: #FF9D6E; margin-bottom: 10px; }
.ms-window__result { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 16px; background: #2E2419; border: 1px solid #3A3028; border-radius: 12px; }

.ms-section { padding: 70px 0; }
.ms-section--tight { padding-top: 0; }
.ms-section-head { text-align: center; margin: 0 0 40px; }

.ms-pop-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.ms-pop-card { position: relative; background: #fff; border: 2px solid #F0E6D8; border-radius: 18px; padding: 24px; transition: transform .15s ease, box-shadow .15s ease; }
.ms-pop-card:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -18px rgba(36,31,26,.25); }
.ms-pop-card__badge { position: absolute; top: -10px; right: 16px; background: #FF7A45; color: #fff; font-size: 10.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.ms-pop-card__go { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #FF7A45; margin-top: 10px; }

.ms-tabs { display: flex; justify-content: center; gap: 8px; margin: 0 0 44px; flex-wrap: wrap; }
.ms-tab { font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 999px; border: 1.5px solid #F0E6D8; color: #5A5248; background: #fff; cursor: pointer; }
.ms-tab:hover { border-color: #FF7A45; color: #FF7A45; }
.ms-tab.is-active { background: #241F1A; border-color: #241F1A; color: #fff; }

.ms-cat-divider { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; }
.ms-cat-divider__label { font-family: 'Baloo 2', sans-serif; font-size: 13px; font-weight: 700; white-space: nowrap; }
.ms-cat-divider__line { height: 1px; background: #F0E6D8; width: 100%; }
.ms-cat-divider__count { font-size: 12px; font-weight: 600; color: #8A7F6E; white-space: nowrap; }

.ms-label-card { display: block; background: #fff; border: 2px solid #F0E6D8; border-radius: 16px; padding: 20px; text-align: center; transition: transform .15s ease, box-shadow .15s ease; }
.ms-label-card:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -18px rgba(36,31,26,.22); }
.ms-label-card__logo { height: 34px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.ms-label-card__logo img { max-height: 100%; max-width: 110px; object-fit: contain; }
.ms-label-card h5 { font-family: 'Baloo 2', sans-serif; font-size: 14px; font-weight: 700; margin: 0 0 4px; }
.ms-label-card p { font-size: 12px; color: #8A7F6E; margin: 0; }

.ms-linkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }
.ms-linkgrid a { display: block; padding: 14px 16px; border: 2px solid #F0E6D8; border-radius: 14px; background: #fff; font-weight: 700; color: #241F1A; text-align: center; font-size: 13.5px; }
.ms-linkgrid a:hover { border-color: #FF7A45; color: #FF7A45; }

/* ---- header/homepage responsive ---- */
@media (max-width: 980px) {
  .ms-home-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .ms-window { max-width: 460px; }
  .ms-pop-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .ms-home-hero { padding: 36px 0 36px; }
  .ms-home-hero h1 { font-size: 32px; }
  .ms-pop-grid { grid-template-columns: 1fr; }
  .ms-section { padding: 44px 0; }
  .ms-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; padding: 40px 20px 10px; }
  .ms-footer-grid > div:first-child { grid-column: 1 / -1; margin-bottom: 10px; }
  .ms-footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 20px 30px; }
}

/* ---- homepage extras: CTA row, trust grid, divider dot ------------- */
.ms-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 8px; }

/* ---- hero "stalls" grid (replaces the product-window mockup) ------- */
.ms-hero-stalls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ms-hero-stall { border-radius: 22px; padding: 24px; transition: transform .18s ease; display: block; }
.ms-hero-stall:hover { transform: translateY(-4px) rotate(0deg) !important; }
.ms-hero-stall__icon { color: #fff; margin-bottom: 26px; }
.ms-hero-stall__title { color: #fff; font-size: 16px; font-weight: 700; }
.ms-hero-stall__count { color: rgba(255,255,255,.82); font-size: 12px; margin-top: 4px; }

/* ---- "stall index" category tiles ----------------------------------- */
.ms-stall-tiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.ms-stall-tile { display: block; border-radius: 18px; padding: 22px; color: #fff; transition: transform .18s ease; }
.ms-stall-tile:hover { transform: translateY(-4px); }
.ms-stall-tile__title { font-size: 15.5px; font-weight: 700; margin-bottom: 4px; }
.ms-stall-tile__count { font-size: 12px; opacity: .85; }
.ms-stall-tile.ms-c-orange { background: #FF7A45; }
.ms-stall-tile.ms-c-teal { background: #14B8A6; }
.ms-stall-tile.ms-c-pink { background: #EC4899; }
.ms-stall-tile.ms-c-blue { background: #3B82F6; }
.ms-stall-tile.ms-c-purple { background: #8B5CF6; }
.ms-stall-tile.ms-c-amber { background: #F59E0B; }
.ms-stall-tile.ms-c-green { background: #10B981; }
.ms-stall-tile.ms-c-red { background: #EF4444; }

/* ---- "From the Journal" blog teaser grid ---------------------------- */
.ms-journal-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.ms-journal-card { background: #fff; border: 2px solid #F0E6D8; border-radius: 18px; padding: 22px; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.ms-journal-card:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -18px rgba(36,31,26,.25); }
.ms-journal-card__badge { align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; margin-bottom: 14px; }
.ms-journal-card__title { font-family: 'Baloo 2', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.3; margin-bottom: 10px; color: #241F1A; }
.ms-journal-card__meta { margin-top: auto; font-size: 11.5px; color: #8A7F6E; }

/* ---- dark rounded CTA band ------------------------------------------ */
.ms-cta-band { background: #241F1A; border-radius: 32px; padding: 56px 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ms-cta-band__title { color: #FFFBF5; font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.ms-cta-band__sub { color: #B8AFA0; font-size: 14px; }

@media (max-width: 980px) {
  .ms-hero-stalls { order: -1; }
  .ms-stall-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ms-journal-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ms-cta-band { flex-direction: column; text-align: center; border-radius: 24px; padding: 40px 28px; }
}
@media (max-width: 640px) {
  .ms-hero-stalls { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ms-hero-stall { padding: 18px; border-radius: 18px; }
  .ms-stall-tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ms-journal-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}

.ms-cat-divider__dot { width: 9px; height: 9px; border-radius: 999px; background: #FF7A45; flex-shrink: 0; }

.ms-trust { background: #fff; border: 2px solid #F0E6D8; border-radius: 24px; padding: 48px 40px; text-align: center; }
.ms-trust h2 { font-family: 'Baloo 2', sans-serif; font-size: 26px; font-weight: 700; color: #241F1A; margin: 0 0 34px; }
.ms-trust__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; text-align: left; }
.ms-trust__item h3 { font-family: 'Baloo 2', sans-serif; font-size: 16px; font-weight: 700; color: #241F1A; margin: 0 0 8px; }
.ms-trust__item p { font-size: 13.5px; color: #8A7F6E; line-height: 1.6; margin: 0; }
.ms-trust__icon { width: 46px; height: 46px; border-radius: 13px; background: #FFE4D4; color: #C2410C; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }

@media (max-width: 980px) {
  .ms-home-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .ms-home-hero h1 { font-size: 38px; }
  .ms-pop-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ms-trust__grid { grid-template-columns: 1fr; gap: 24px; }
  .ms-trust { padding: 36px 24px; }
}
@media (max-width: 640px) {
  .ms-home-hero { padding: 36px 0 32px; }
  .ms-home-hero h1 { font-size: 30px; }
  .ms-pop-grid { grid-template-columns: 1fr; }
}

/* Tailwind's .hidden and .ms-btn/.ms-dropzone both set `display`; since this
   stylesheet loads after style.min.css, equal specificity falls to source
   order and .ms-btn would win. These two-class overrides force .hidden to
   win whenever it's combined with an ms- class that sets its own display. */
.ms-btn.hidden, .ms-dropzone.hidden, .ms-tool-card.hidden, .ms-pop-card.hidden { display: none; }