/* Sihat Frame – base styles that Tailwind utilities don't cover */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');
/* small technical labels (step numbers, product chips) */
.font-mono-dm { font-family: 'DM Mono', ui-monospace, monospace; }
/* Serif headings read more premium at a medium weight with natural spacing */
.font-display.font-bold, .font-display.font-extrabold { font-weight: 600; }
.font-display.tracking-tight { letter-spacing: -0.01em; }
html { scroll-behavior: smooth; }
/* the header is injected into this wrapper; without this its `sticky` would only stick inside it */
#frame-header { display: contents; }
body { -webkit-font-smoothing: antialiased; }
::selection { background: #D9EC8C; color: #0D2E18; }

/* floating capsules / labels in the hero */
@keyframes sihat-float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.float-slow { animation: sihat-float 6s ease-in-out infinite; }
.float-slower { animation: sihat-float 8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .float-slow, .float-slower { animation: none; } }

/* scroll spotlight: benefit cards appear one by one */
.spot-card { opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.spot-card.is-on { opacity: 1; transform: none; }
[data-spot-caption] .font-display { font-size: 1.375rem; line-height: 1.2; }
[data-spot-caption] p { display: none; }
iconify-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; }
:focus-visible { outline: 2px solid #3F7A5E; outline-offset: 2px; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(180deg); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
/* Pages with a sticky mobile buy bar lift the floating WhatsApp button above it */
@media (max-width: 1023px) { body[data-buybar] [data-wa-float] { bottom: 5.75rem; } }

/* Long-form content coming from WordPress (blog posts, policies) */
.prose-sihat { color: #4F544A; font-size: 1.0625rem; line-height: 1.8; }
.prose-sihat > * + * { margin-top: 1.1em; }
.prose-sihat h1, .prose-sihat h2, .prose-sihat h3, .prose-sihat h4 { font-family: Fraunces, Georgia, serif; color: #1F4D3A; font-weight: 600; line-height: 1.25; scroll-margin-top: 110px; }
.prose-sihat h1 { font-size: 2rem; }
.prose-sihat h2 { font-size: 1.75rem; margin-top: 2em; }
.prose-sihat h3 { font-size: 1.35rem; margin-top: 1.6em; }
.prose-sihat h4 { font-size: 1.1rem; margin-top: 1.4em; }
.prose-sihat a { color: #1F4D3A; text-decoration: underline; text-decoration-color: #D9A441; text-underline-offset: 3px; }
.prose-sihat strong { color: #22241F; }
.prose-sihat ul, .prose-sihat ol { padding-left: 1.3em; }
.prose-sihat ul { list-style: disc; }
.prose-sihat ol { list-style: decimal; }
.prose-sihat li + li { margin-top: .4em; }
.prose-sihat li::marker { color: #3F7A5E; }
.prose-sihat img { border-radius: 1.25rem; margin: 2em auto; height: auto; }
.prose-sihat blockquote { border-left: 3px solid #D9A441; padding-left: 1.2em; font-style: italic; color: #22241F; }
.prose-sihat table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose-sihat th, .prose-sihat td { border: 1px solid #E6DECB; padding: .6em .8em; text-align: left; }
.prose-sihat th { background: #F3EDE0; color: #22241F; }
.prose-sihat figure { margin: 2em 0; }
.prose-sihat .wp-block-button__link, .prose-sihat .elementor-button { display: inline-block; background: #1F4D3A; color: #FFFDF8; padding: .7em 1.4em; border-radius: 999px; text-decoration: none; }

/* phones: form fields use 16px text, otherwise iPhones zoom the page in when a field is tapped */
@media (max-width: 767px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select, textarea { font-size: 16px !important; }
}