/* tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
/* Converted for sass-rails 5.0 / PURE CSS compatibility */

/* ── Theme ────────────────────────────────────────────────────────────── */

:root, :host {
  --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --color-amber-50: #fffbeb;
  --color-amber-500: #f59e0b;
  --color-emerald-50: #ecfdf5;
  --color-emerald-500: #10b981;
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-rose-50: #fff1f2;
  --color-rose-500: #f43f5e;
  --color-slate-50: #f8fafc;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  --color-white: #fff;
  --spacing: 0.25rem;
  --container-xl: 36rem;
  --container-3xl: 48rem;
  --container-5xl: 64rem;
  --text-xs: 0.75rem;
  --text-xs--line-height: 1.33333;
  --text-sm: 1rem;
  --text-sm--line-height: 1.42857;
  --text-lg: 1.125rem;
  --text-lg--line-height: 1.55556;
  --text-xl: 1.25rem;
  --text-xl--line-height: 1.4;
  --text-2xl: 1.5rem;
  --text-2xl--line-height: 1.33333;
  --text-3xl: 1.875rem;
  --text-3xl--line-height: 1.2;
  --text-4xl: 2.25rem;
  --text-4xl--line-height: 1.11111;
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --tracking-wide: 0.025em;
  --tracking-widest: 0.1em;
  --leading-tight: 1.25;
  --leading-relaxed: 1.625;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --blur-sm: 8px;
  --aspect-video: 16 / 9;
  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
}


/* ── Base ─────────────────────────────────────────────────────────────── */

*, ::after, ::before, ::backdrop {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

html, :host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
  font-feature-settings: var(--default-font-feature-settings, normal);
  font-variation-settings: var(--default-font-variation-settings, normal);
  -webkit-tap-highlight-color: transparent;
}

hr { height: 0; color: inherit; border-top-width: 1px; }
abbr[title] { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }

code, kbd, samp, pre {
  font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
  font-feature-settings: var(--default-mono-font-feature-settings, normal);
  font-variation-settings: var(--default-mono-font-variation-settings, normal);
  font-size: 1em;
}

small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
:-moz-focusring { outline: auto; }
progress { vertical-align: baseline; }
summary { display: list-item; }
ol, ul, menu { list-style: none; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }

button, input, select, optgroup, textarea {
  font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1;
}

select[multiple] optgroup, select[size] optgroup { font-weight: bolder; }
select[multiple] optgroup option, select[size] optgroup option { padding-inline-start: 20px; }
::-webkit-file-upload-button { margin-inline-end: 4px; }
::-moz-placeholder { opacity: 1; }
::-webkit-input-placeholder { opacity: 1; }
::placeholder { opacity: 1; color: rgba(0, 0, 0, 0.5); }
textarea { resize: vertical; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-date-and-time-value { min-height: 1.5em; text-align: inherit; }
::-webkit-datetime-edit { display: inline-flex; }
::-webkit-datetime-edit-fields-wrapper { padding: 0; }
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-top: 0; padding-bottom: 0; }
::-webkit-calendar-picker-indicator { line-height: 1; }
:-moz-ui-invalid { box-shadow: none; }
button, input[type='button'], input[type='reset'], input[type='submit'] { appearance: button; -webkit-appearance: button; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
[hidden]:not([hidden='until-found']) { display: none !important; }

/* ── Custom property defaults ────────────────────────────────────────── */

*, ::before, ::after, ::backdrop {
  --tw-space-y-reverse: 0; --tw-border-style: solid; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial;
}

/* ── Utilities ────────────────────────────────────────────────────────── */

.absolute { position: absolute; }
.relative { position: relative; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.right-0 { right: 0; }
.bottom-4 { bottom: 1rem; }
.left-0 { left: 0; }
.z-10 { z-index: 10; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.ml-1 { margin-left: 0.25rem; }
.flex { display: flex; }
.grid { display: grid; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.aspect-video { aspect-ratio: 16 / 9; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-16 { height: 4rem; }
.min-h-screen { min-height: 100vh; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-16 { width: 4rem; }
.max-w-3xl { max-width: var(--container-3xl); }
.max-w-5xl { max-width: var(--container-5xl); }
.max-w-xl { max-width: var(--container-xl); }
.flex-1 { flex: 1; }
.shrink-0 { flex-shrink: 0; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-5 { gap: 1.25rem; }
.gap-10 { gap: 2.5rem; }
.gap-16 { gap: 4rem; }
.space-y-4 > *:not(:last-child) { margin-top: 0; margin-bottom: 1rem; }
.overflow-hidden { overflow: hidden; }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.border { border-style: solid; border-width: 1px; }

.border-y {
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.border-gray-100 { border-color: var(--color-gray-100); }
.border-gray-200 { border-color: var(--color-gray-200); }

/* Escaping slashes as \2f */
.border-white\2f 20 { border-color: rgba(255, 255, 255, 0.2); }

.bg-amber-50 { background-color: var(--color-amber-50); }
.bg-blue-50 { background-color: var(--color-blue-50); }
.bg-blue-100 { background-color: var(--color-blue-100); }
.bg-emerald-50 { background-color: var(--color-emerald-50); }
.bg-gray-50 { background-color: var(--color-gray-50); }
.bg-gray-900 { background-color: var(--color-gray-900); }
.bg-rose-50 { background-color: var(--color-rose-50); }
.bg-white { background-color: var(--color-white); }

/* Escaping slashes as \2f */
.bg-white\2f 10 { background-color: rgba(255, 255, 255, 0.1); }

.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }

.from-gray-800 { --tw-gradient-from: var(--color-gray-800); }
.from-slate-50 { --tw-gradient-from: var(--color-slate-50); }
.to-gray-950 { --tw-gradient-to: var(--color-gray-950); }
.to-white { --tw-gradient-to: var(--color-white); }
.p-6 { padding: 1.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.pt-16 { padding-top: 4rem; }
.pb-12 { padding-bottom: 3rem; }
.text-center { text-align: center; }

.text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); }
.text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); }
.text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); }
.text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); }
.text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); }
.text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); }
.text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); }

.leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); }
.leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); }
.font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); }
.font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); }
.font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); }
.tracking-wide { --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); }
.tracking-widest { --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); }

.text-amber-500 { color: var(--color-amber-500); }
.text-blue-500 { color: var(--color-blue-500); }
.text-blue-600 { color: var(--color-blue-600); }
.text-emerald-500 { color: var(--color-emerald-500); }
.text-gray-400 { color: var(--color-gray-400); }
.text-gray-500 { color: var(--color-gray-500); }
.text-gray-600 { color: var(--color-gray-600); }
.text-gray-700 { color: var(--color-gray-700); }
.text-gray-900 { color: var(--color-gray-900); }
.text-rose-500 { color: var(--color-rose-500); }
.text-white { color: var(--color-white); }

/* Escaping slashes as \2f */
.text-white\2f 40 { color: rgba(255, 255, 255, 0.4); }

.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }

.shadow-sm {
  /* Using standard rgba() with commas here instead of rgb() space syntax */
  --tw-shadow: #{0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)};
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(var(--blur-sm));
  -webkit-backdrop-filter: var(--tw-backdrop-blur);
  backdrop-filter: var(--tw-backdrop-blur);
}

.transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

/* ── Hover variants ───────────────────────────────────────────────────── */
/* Escaping colons as \3a and slashes as \2f */

.hover\3a bg-white\2f 20:hover { background-color: rgba(255, 255, 255, 0.2); }
.hover\3a text-gray-900:hover { color: var(--color-gray-900); }
.hover\3a opacity-90:hover { opacity: 0.9; }

.hover\3a shadow-sm:hover {
  /* Using standard rgba() with commas */
  --tw-shadow: #{0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)};
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

/* ── Responsive variants ──────────────────────────────────────────────── */

@media (min-width: 40rem) {
  .sm\3a grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
  .md\3a grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\3a text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); }
}

/* ── Custom components ────────────────────────────────────────────────── */

.mbtn {
  display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 24px 48px; border-radius: 16px; background: #1e9aed; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 24px; border: none; cursor: pointer; white-space: nowrap; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px 2px 10px 0px rgba(0, 0, 0, 0.1); text-transform: none !important; letter-spacing: normal !important;
}

.mbtn:hover { opacity: 0.9; }

#ujoin_main_video_holder {
  width: 381px; height: 205px; border-radius: 10px; overflow: hidden; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
}

#ujoin_main_video { margin: 0px auto; width: 381px; height: 210px; }