/* KayaKoBaPH — custom overrides. Tailwind (CDN) handles the rest. */

html {
  scroll-behavior: smooth;
  /* Fluid root font-size: scales the whole rem-based UI proportionally with the
     viewport — ~15px on small phones up to ~19px on large desktops. */
  font-size: clamp(15px, 13.5px + 0.45vw, 19px);
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

/* Inputs: never below 16px (prevents mobile zoom-on-focus), scale up on desktop */
input,
select,
textarea,
button {
  font-size: max(16px, 1rem);
}

/* Hide elements until Alpine initializes (prevents flash of unstyled template) */
[x-cloak] {
  display: none !important;
}

/* Result header gradient (SureDwell green, lightened) */
.result-hero {
  background: linear-gradient(160deg, #2faa4e 0%, #1f8a3f 100%);
}

/* Subtle lift on option cards */
.option-card {
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.option-card:hover {
  box-shadow: 0 1px 8px rgba(15, 42, 71, 0.08);
}

/* Step progress dots */
.step-dot {
  transition: background-color 0.2s ease, width 0.2s ease;
}

/* Fade/slide for revealed sections */
.reveal-enter {
  opacity: 0;
  transform: translateY(8px);
}
.reveal-enter-active {
  transition: opacity 0.4s ease, transform 0.4s ease;
}