/*
 * Tailwind CSS — Pre-compiled utilities for landing page templates
 * Generated to replace the Tailwind CDN runtime compiler.
 *
 * Custom config:
 *   colors: Material Design 3 token palette
 *   fontFamily: headline (Plus Jakarta Sans), body (Nunito Sans), label (Inter)
 *   borderRadius: DEFAULT 1rem, lg 2rem, xl 3rem, full 9999px
 *
 * Breakpoints: md 768px, lg 1024px
 */

/* Preflight is in landing-extracted.css — this file contains only utilities */

/* ============================================================
   @tailwindcss/forms plugin — global form element resets
   (was loaded via CDN ?plugins=forms)
   ============================================================ */
[type='text'],
[type='email'],
[type='url'],
[type='password'],
[type='number'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='search'],
[type='tel'],
[type='time'],
[type='week'],
[multiple],
textarea,
select {
  appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}
[type='text']:focus,
[type='email']:focus,
[type='url']:focus,
[type='password']:focus,
[type='number']:focus,
[type='date']:focus,
[type='datetime-local']:focus,
[type='month']:focus,
[type='search']:focus,
[type='tel']:focus,
[type='time']:focus,
[type='week']:focus,
[multiple]:focus,
textarea:focus,
select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-color: #2563eb;
  border-color: var(--tw-ring-color);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    0 0 0 calc(1px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color),
    var(--tw-shadow, 0 0 #0000);
}
input::placeholder,
textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}
[type='checkbox'],
[type='radio'] {
  appearance: none;
  padding: 0;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}
[type='checkbox'] {
  border-radius: 0;
}
[type='radio'] {
  border-radius: 100%;
}
[type='checkbox']:focus,
[type='radio']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-color: #2563eb;
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    0 0 0 calc(2px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color),
    var(--tw-shadow, 0 0 #0000);
}
[type='checkbox']:checked,
[type='radio']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
[type='file'] {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}
[type='file']:focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}

/* ============================================================
   LAYOUT — Display
   ============================================================ */
.hidden     { display: none; }
.block      { display: block; }
.inline-block { display: inline-block; }
.flex       { display: flex; }
.grid       { display: grid; }

/* ============================================================
   LAYOUT — Position
   ============================================================ */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }

/* ============================================================
   LAYOUT — Overflow / Z-Index / Inset
   ============================================================ */
.overflow-hidden { overflow: hidden; }
.z-0   { z-index: 0; }
.z-10  { z-index: 10; }
.inset-0 { inset: 0; }

/* ============================================================
   POSITION OFFSETS
   ============================================================ */
.top-1\/2    { top: 50%; }
.-top-8      { top: -2rem; }
.-top-24     { top: -6rem; }
.-bottom-24  { bottom: -6rem; }
.-left-2     { left: -0.5rem; }
.-left-24    { left: -6rem; }
.-right-8    { right: -2rem; }
.-right-24   { right: -6rem; }

/* ============================================================
   GROUP (marker — no styles)
   ============================================================ */
/* .group {} */

/* ============================================================
   SIZING — Width
   ============================================================ */
.w-10   { width: 2.5rem; }
.w-12   { width: 3rem; }
.w-16   { width: 4rem; }
.w-64   { width: 16rem; }
.w-96   { width: 24rem; }
.w-full { width: 100%; }

/* ============================================================
   SIZING — Height
   ============================================================ */
.h-10       { height: 2.5rem; }
.h-12       { height: 3rem; }
.h-64       { height: 16rem; }
.h-96       { height: 24rem; }
.h-\[2px\]  { height: 2px; }

/* ============================================================
   SIZING — Max-Width
   ============================================================ */
.max-w-xl  { max-width: 36rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-7xl { max-width: 80rem; }

/* ============================================================
   SPACING — Padding
   ============================================================ */
.p-6   { padding: 1.5rem; }
.p-8   { padding: 2rem; }
.p-10  { padding: 2.5rem; }
.p-12  { padding: 3rem; }
.px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-12 { padding-left: 3rem; padding-right: 3rem; }
.py-3  { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-5  { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.pt-0  { padding-top: 0; }
.pt-8  { padding-top: 2rem; }
.pb-6  { padding-bottom: 1.5rem; }
.pb-12 { padding-bottom: 3rem; }

/* ============================================================
   SPACING — Margin
   ============================================================ */
.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 0.25rem; }
.mt-4  { margin-top: 1rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }
.ml-2  { margin-left: 0.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ============================================================
   SPACING — Gap
   ============================================================ */
.gap-0   { gap: 0; }
.gap-0\.5 { gap: 0.125rem; }
.gap-1   { gap: 0.25rem; }
.gap-2   { gap: 0.5rem; }
.gap-3   { gap: 0.75rem; }
.gap-4   { gap: 1rem; }
.gap-8   { gap: 2rem; }
.gap-12  { gap: 3rem; }

/* ============================================================
   SPACING — Space-Y
   ============================================================ */
.space-y-4 > :not(:first-child) {
  margin-top: 1rem;
}

/* ============================================================
   FLEX / GRID — Alignment & Direction
   ============================================================ */
.flex-col       { flex-direction: column; }
.flex-nowrap    { flex-wrap: nowrap; }
.items-center   { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }

/* ============================================================
   GRID — Columns & Span
   ============================================================ */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ============================================================
   TYPOGRAPHY — Font Family
   ============================================================ */
.font-headline { font-family: "Plus Jakarta Sans", sans-serif; }
.font-body     { font-family: "Nunito Sans", sans-serif; }
.font-label    { font-family: "Inter", sans-serif; }

/* ============================================================
   TYPOGRAPHY — Font Size / Line Height
   ============================================================ */
.text-xs   { font-size: 0.75rem; line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem; line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem; line-height: 2.5rem; }
.text-6xl  { font-size: 3.75rem; line-height: 1; }
.text-\[10px\] { font-size: 10px; }

/* ============================================================
   TYPOGRAPHY — Font Weight
   ============================================================ */
.font-medium   { font-weight: 500; }
.font-bold     { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* ============================================================
   TYPOGRAPHY — Line Height (standalone)
   ============================================================ */
.leading-\[1\.1\] { line-height: 1.1; }
.leading-relaxed  { line-height: 1.625; }
.leading-tight    { line-height: 1.25; }

/* ============================================================
   TYPOGRAPHY — Letter Spacing
   ============================================================ */
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.tracking-tight      { letter-spacing: -0.025em; }
.tracking-wide       { letter-spacing: 0.025em; }

/* ============================================================
   TYPOGRAPHY — Text Alignment
   ============================================================ */
.text-center { text-align: center; }

/* ============================================================
   TYPOGRAPHY — Text Transform / Style / Misc
   ============================================================ */
.uppercase   { text-transform: uppercase; }
.italic      { font-style: italic; }
.select-none { user-select: none; }
.list-none   { list-style-type: none; }

/* ============================================================
   TEXT COLORS
   ============================================================ */
.text-primary                    { color: #001736; }
.text-primary\/5                 { color: rgba(0, 23, 54, 0.05); }
.text-primary-fixed\/80          { color: rgba(214, 227, 255, 0.8); }
.text-secondary                  { color: #2d4add; }
.text-secondary-fixed            { color: #dee0ff; }
.text-error                      { color: #ba1a1a; }
.text-white                      { color: #ffffff; }
.text-on-primary                 { color: #ffffff; }
.text-on-secondary               { color: #ffffff; }
.text-on-secondary-fixed         { color: #000f5c; }
.text-on-surface                 { color: #191c1d; }
.text-on-surface-variant         { color: #43474f; }
.text-on-primary-fixed-variant   { color: #264778; }
.text-on-tertiary-container      { color: #35a399; }
.text-on-tertiary-fixed-variant  { color: #00504a; }
.text-slate-400                  { color: #94a3b8; }
.text-slate-500                  { color: #64748b; }

/* ============================================================
   BACKGROUND COLORS
   ============================================================ */
.bg-background              { background-color: #f8f9fa; }
.bg-primary                 { background-color: #001736; }
.bg-primary\/10             { background-color: rgba(0, 23, 54, 0.1); }
.bg-secondary               { background-color: #2d4add; }
.bg-secondary-fixed         { background-color: #dee0ff; }
.bg-tertiary-fixed          { background-color: #8ef4e9; }
.bg-white                   { background-color: #ffffff; }
.bg-white\/5                { background-color: rgba(255, 255, 255, 0.05); }
.bg-surface-container-low   { background-color: #f3f4f5; }
.bg-surface-container-lowest { background-color: #ffffff; }
.bg-outline-variant\/30     { background-color: rgba(196, 198, 208, 0.3); }
.bg-slate-50                { background-color: #f8fafc; }

/* ============================================================
   SELECTION PSEUDO-ELEMENT
   ============================================================ */
.selection\:bg-secondary-fixed::selection   { background-color: #dee0ff; }
.selection\:text-on-secondary-fixed::selection { color: #000f5c; }

/* ============================================================
   BORDERS
   ============================================================ */
.border-t              { border-top-width: 1px; border-top-style: solid; }
.border-none           { border-style: none; }
.border-slate-200\/15  { border-color: rgba(226, 232, 240, 0.15); }

/* ============================================================
   BORDER RADIUS (custom config)
   ============================================================ */
.rounded-lg   { border-radius: 2rem; }
.rounded-full { border-radius: 9999px; }

/* ============================================================
   TRANSITIONS
   ============================================================ */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* ============================================================
   CURSOR
   ============================================================ */
.cursor-pointer { cursor: pointer; }

/* ============================================================
   STATE VARIANTS — Hover
   ============================================================ */
.hover\:bg-surface-container:hover { background-color: #edeeef; }
.hover\:scale-105:hover            { transform: scale(1.05); }
.hover\:text-primary:hover         { color: #001736; }

/* ============================================================
   STATE VARIANTS — Active
   ============================================================ */
.active\:scale-95:active { transform: scale(0.95); }

/* ============================================================
   STATE VARIANTS — Group Hover / Group Open
   ============================================================ */
.group:hover .group-hover\:-translate-y-2 {
  transform: translateY(-0.5rem);
}
.group[open] .group-open\:rotate-180,
.group.open .group-open\:rotate-180 {
  transform: rotate(180deg);
}

/* ============================================================
   RESPONSIVE — md (min-width: 768px)
   ============================================================ */
@media (min-width: 768px) {
  .md\:block       { display: block; }
  .md\:flex-row    { flex-direction: row; }
  .md\:gap-3       { gap: 0.75rem; }
  .md\:gap-4       { gap: 1rem; }
  .md\:gap-6       { gap: 1.5rem; }
  .md\:gap-8       { gap: 2rem; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:mt-12       { margin-top: 3rem; }
  .md\:p-24        { padding: 6rem; }
  .md\:pt-0        { padding-top: 0; }
  .md\:px-12       { padding-left: 3rem; padding-right: 3rem; }
  .md\:py-24       { padding-top: 6rem; padding-bottom: 6rem; }
  .md\:py-32       { padding-top: 8rem; padding-bottom: 8rem; }
  .md\:text-2xl    { font-size: 1.5rem; line-height: 2rem; }
  .md\:text-4xl    { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:text-5xl    { font-size: 3rem; line-height: 1; }
  .md\:text-6xl    { font-size: 3.75rem; line-height: 1; }
  .md\:text-left   { text-align: left; }
  .md\:text-lg     { font-size: 1.125rem; line-height: 1.75rem; }
  .md\:text-sm     { font-size: 0.875rem; line-height: 1.25rem; }
}

/* ============================================================
   RESPONSIVE — lg (min-width: 1024px)
   ============================================================ */
@media (min-width: 1024px) {
  .lg\:col-span-2   { grid-column: span 2 / span 2; }
  .lg\:gap-16       { gap: 4rem; }
  .lg\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}