/*! Property & Poppadoms - Compiled Tailwind CSS + Custom Styles */

/*! Generated from site scan - replaces cdn.tailwindcss.com */



/* ============================================

   CSS Reset & Base

   ============================================ */

*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}

::after,::before{--tw-content:''}

html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;font-feature-settings:normal;font-variation-settings:normal}

body{margin:0;line-height:inherit}

hr{height:0;color:inherit;border-top-width:1px}

abbr:where([title]){text-decoration:underline dotted}

h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}

a{color:inherit;text-decoration:inherit}

b,strong{font-weight:bolder}

code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}

small{font-size:80%}

sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}

sub{bottom:-.25em}

sup{top:-.5em}

table{text-indent:0;border-color:inherit;border-collapse:collapse}

button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}

button,select{text-transform:none}

[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}

:-moz-focusring{outline:auto}

:-moz-ui-invalid{box-shadow:none}

progress{vertical-align:baseline}

::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}

[type=search]{-webkit-appearance:textfield;outline-offset:-2px}

::-webkit-search-decoration{-webkit-appearance:none}

::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}

summary{display:list-item}

blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}

fieldset{margin:0;padding:0}

legend{padding:0}

menu,ol,ul{list-style:none;margin:0;padding:0}

dialog{padding:0}

textarea{resize:vertical}

input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}

[role=button],button{cursor:pointer}

:disabled{cursor:default}

audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}

img,video{max-width:100%;height:auto}

/* YouTube background video - fill container and hide controls */

iframe{border:0;width:100%;height:100%}

[hidden]{display:none}



/* ============================================

   CSS Custom Properties

   ============================================ */

:root{

--color-gold:#ba8e4a;

--color-gold-light:#d4a85c;

--color-gold-dark:#9a7339;

--color-cream:#cec1ac;

--color-dark:#161616;

--color-light:#f8f6f3;

--color-primary:#e94560;

--color-primary-dark:#d63850;

--color-primary-light:#ff6b6b;

}



/* ============================================

   Font Faces - Update these paths if fonts are elsewhere

   ============================================ */

@font-face{font-family:'Veneer';src:url('/media/veneer-w03.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

@font-face{font-family:'Veneer Clean';src:url('/media/VeneerClean-Reg.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

@font-face{font-family:'DM Sans';src:url('/media/DMSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}



/* ============================================

   Custom Color Classes

   ============================================ */

.bg-gold{background-color:#ba8e4a}

.bg-gold\/10{background-color:rgb(186 142 74/0.1)}

.bg-gold\/20{background-color:rgb(186 142 74/0.2)}

.bg-cream{background-color:#cec1ac}

.bg-dark{background-color:#161616}

.bg-dark\/10{background-color:rgb(22 22 22/0.1)}

.bg-dark\/20{background-color:rgb(22 22 22/0.2)}

.bg-dark\/50{background-color:rgb(22 22 22/0.5)}

.bg-dark\/80{background-color:rgb(22 22 22/0.8)}

.bg-light{background-color:#f8f6f3}

.bg-primary{background-color:#e94560}

.bg-primary\/10{background-color:rgb(233 69 96/0.1)}

.bg-primary\/20{background-color:rgb(233 69 96/0.2)}

.bg-primary\/80{background-color:rgb(233 69 96/0.8)}

.bg-primary\/90{background-color:rgb(233 69 96/0.9)}

.text-gold{color:#ba8e4a}

.text-gold\/40{color:rgb(186 142 74/0.4)}

.text-dark{color:#161616}

.text-dark\/40{color:rgb(22 22 22/0.4)}

.text-dark\/50{color:rgb(22 22 22/0.5)}

.text-dark\/60{color:rgb(22 22 22/0.6)}

.text-dark\/70{color:rgb(22 22 22/0.7)}

.text-dark\/80{color:rgb(22 22 22/0.8)}

.text-primary{color:#e94560}

.border-gold{border-color:#ba8e4a}

.border-gold\/30{border-color:rgb(186 142 74/0.3)}

.border-cream{border-color:#cec1ac}

.border-dark\/10{border-color:rgb(22 22 22/0.1)}

.border-primary\/20{border-color:rgb(233 69 96/0.2)}

.ring-gold{--tw-ring-color:#ba8e4a}

.hover\:bg-gold:hover{background-color:#ba8e4a}

.hover\:bg-dark\/20:hover{background-color:rgb(22 22 22/0.2)}

.hover\:bg-dark\/80:hover{background-color:rgb(22 22 22/0.8)}

.hover\:bg-dark\/90:hover{background-color:rgb(22 22 22/0.9)}

.hover\:bg-cream\/80:hover{background-color:rgb(206 193 172/0.8)}

.hover\:bg-primary-dark:hover{background-color:#d63850}

.hover\:bg-primary\/20:hover{background-color:rgb(233 69 96/0.2)}

.hover\:text-gold:hover{color:#ba8e4a}

.hover\:text-gold-dark:hover{color:#9a7339}

.hover\:text-gold-light:hover{color:#d4a85c}

.hover\:text-dark:hover{color:#161616}

.hover\:text-dark\/70:hover{color:rgb(22 22 22/0.7)}

.hover\:text-primary:hover{color:#e94560}

.hover\:text-primary-light:hover{color:#ff6b6b}

.hover\:border-gold:hover{border-color:#ba8e4a}

.hover\:border-gold\/30:hover{border-color:rgb(186 142 74/0.3)}

.hover\:border-primary\/30:hover{border-color:rgb(233 69 96/0.3)}

.from-gold{--tw-gradient-from:#ba8e4a var(--tw-gradient-from-position);--tw-gradient-to:rgb(186 142 74/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}

.from-dark{--tw-gradient-from:#161616 var(--tw-gradient-from-position);--tw-gradient-to:rgb(22 22 22/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}

.from-dark\/80{--tw-gradient-from:rgb(22 22 22/0.8) var(--tw-gradient-from-position);--tw-gradient-to:rgb(22 22 22/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}

.from-primary\/10{--tw-gradient-from:rgb(233 69 96/0.1) var(--tw-gradient-from-position);--tw-gradient-to:rgb(233 69 96/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}

.from-primary\/20{--tw-gradient-from:rgb(233 69 96/0.2) var(--tw-gradient-from-position);--tw-gradient-to:rgb(233 69 96/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}

.to-gold-light{--tw-gradient-to:#d4a85c var(--tw-gradient-to-position)}

.to-dark\/70{--tw-gradient-to:rgb(22 22 22/0.7) var(--tw-gradient-to-position)}

.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}

.via-dark\/40{--tw-gradient-to:rgb(22 22 22/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgb(22 22 22/0.4) var(--tw-gradient-via-position),var(--tw-gradient-to)}

.via-dark\/90{--tw-gradient-to:rgb(22 22 22/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgb(22 22 22/0.9) var(--tw-gradient-via-position),var(--tw-gradient-to)}

.via-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),transparent var(--tw-gradient-via-position),var(--tw-gradient-to)}

.shadow-primary\/25{--tw-shadow-color:rgb(233 69 96/0.25);--tw-shadow:var(--tw-shadow-colored)}

.shadow-primary\/40{--tw-shadow-color:rgb(233 69 96/0.4);--tw-shadow:var(--tw-shadow-colored)}

.shadow-primary\/5{--tw-shadow-color:rgb(233 69 96/0.05);--tw-shadow:var(--tw-shadow-colored)}

.hover\:shadow-primary\/40:hover{--tw-shadow-color:rgb(233 69 96/0.4);--tw-shadow:var(--tw-shadow-colored)}

.hover\:shadow-primary\/5:hover{--tw-shadow-color:rgb(233 69 96/0.05);--tw-shadow:var(--tw-shadow-colored)}

.focus\:border-primary:focus{border-color:#e94560}

.focus\:border-primary\/50:focus{border-color:rgb(233 69 96/0.5)}

.focus\:ring-gold:focus{--tw-ring-color:#ba8e4a}



/* ============================================

   Font Family Classes

   ============================================ */

.font-display{font-family:'Veneer',Impact,sans-serif}

.font-heading{font-family:'Veneer Clean','Arial Black',sans-serif}

.font-body{font-family:'DM Sans',system-ui,sans-serif}

.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}



/* ============================================

   Layout - Display

   ============================================ */

.block{display:block}

.inline-block{display:inline-block}

.inline-flex{display:inline-flex}

.flex{display:flex}

.grid{display:grid}

.hidden{display:none}



/* ============================================

   Layout - Position

   ============================================ */

.static{position:static}

.fixed{position:fixed}

.absolute{position:absolute}

.relative{position:relative}

.sticky{position:sticky}

.inset-0{inset:0}

.top-0{top:0}

.top-1\/2{top:50%}

.top-2{top:.5rem}

.top-3{top:.75rem}

.top-4{top:1rem}

.top-14{top:3.5rem}

.top-20{top:5rem}

.top-24{top:6rem}

.right-0{right:0}

.right-2{right:.5rem}

.right-3{right:.75rem}

.right-4{right:1rem}

.bottom-0{bottom:0}

.bottom-2{bottom:.5rem}

.bottom-3{bottom:.75rem}

.bottom-4{bottom:1rem}

.bottom-8{bottom:2rem}

.left-0{left:0}

.left-1\/2{left:50%}

.left-2{left:.5rem}

.left-3{left:.75rem}

.left-4{left:1rem}

.-top-1{top:-.25rem}

.-right-1{right:-.25rem}

.-mt-4{margin-top:-1rem}

.-ml-1{margin-left:-.25rem}



/* ============================================

   Layout - Z-Index

   ============================================ */

.z-0{z-index:0}

.z-10{z-index:10}

.z-30{z-index:30}

.z-40{z-index:40}

.z-50{z-index:50}



/* ============================================

   Flexbox

   ============================================ */

.flex-1{flex:1 1 0%}

.flex-col{flex-direction:column}

.flex-col-reverse{flex-direction:column-reverse}

.flex-wrap{flex-wrap:wrap}

.flex-shrink-0{flex-shrink:0}

.items-start{align-items:flex-start}

.items-end{align-items:flex-end}

.items-center{align-items:center}

.items-baseline{align-items:baseline}

.items-stretch{align-items:stretch}

.justify-start{justify-content:flex-start}

.justify-end{justify-content:flex-end}

.justify-center{justify-content:center}

.justify-between{justify-content:space-between}

.order-1{order:1}

.order-2{order:2}



/* ============================================

   Grid

   ============================================ */

.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.col-span-2{grid-column:span 2/span 2}

.col-span-full{grid-column:1/-1}

.gap-1{gap:.25rem}

.gap-2{gap:.5rem}

.gap-3{gap:.75rem}

.gap-4{gap:1rem}

.gap-6{gap:1.5rem}

.gap-8{gap:2rem}

.gap-12{gap:3rem}



/* ============================================

   Spacing - Padding

   ============================================ */

.p-1{padding:.25rem}

.p-2{padding:.5rem}

.p-3{padding:.75rem}

.p-4{padding:1rem}

.p-5{padding:1.25rem}

.p-6{padding:1.5rem}

.p-8{padding:2rem}

.p-12{padding:3rem}

.px-2{padding-left:.5rem;padding-right:.5rem}

.px-2\.5{padding-left:.625rem;padding-right:.625rem}

.px-3{padding-left:.75rem;padding-right:.75rem}

.px-4{padding-left:1rem;padding-right:1rem}

.px-5{padding-left:1.25rem;padding-right:1.25rem}

.px-6{padding-left:1.5rem;padding-right:1.5rem}

.px-8{padding-left:2rem;padding-right:2rem}

.px-10{padding-left:2.5rem;padding-right:2.5rem}

.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}

.py-1{padding-top:.25rem;padding-bottom:.25rem}

.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}

.py-2{padding-top:.5rem;padding-bottom:.5rem}

.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}

.py-3{padding-top:.75rem;padding-bottom:.75rem}

.py-4{padding-top:1rem;padding-bottom:1rem}

.py-5{padding-top:1.25rem;padding-bottom:1.25rem}

.py-6{padding-top:1.5rem;padding-bottom:1.5rem}

.py-8{padding-top:2rem;padding-bottom:2rem}

.py-12{padding-top:3rem;padding-bottom:3rem}

.py-16{padding-top:4rem;padding-bottom:4rem}

.py-20{padding-top:5rem;padding-bottom:5rem}

.pt-2{padding-top:.5rem}

.pt-3{padding-top:.75rem}

.pt-4{padding-top:1rem}

.pt-6{padding-top:1.5rem}

.pt-8{padding-top:2rem}

.pt-12{padding-top:3rem}

.pt-32{padding-top:8rem}

.pr-4{padding-right:1rem}

.pr-10{padding-right:2.5rem}

.pb-2{padding-bottom:.5rem}

.pb-4{padding-bottom:1rem}

.pb-8{padding-bottom:2rem}

.pb-12{padding-bottom:3rem}

.pl-10{padding-left:2.5rem}



/* ============================================

   Spacing - Margin

   ============================================ */

.m-0{margin:0}

.mx-2{margin-left:.5rem;margin-right:.5rem}

.mx-4{margin-left:1rem;margin-right:1rem}

.mx-auto{margin-left:auto;margin-right:auto}

.my-4{margin-top:1rem;margin-bottom:1rem}

.my-8{margin-top:2rem;margin-bottom:2rem}

.mt-0\.5{margin-top:.125rem}

.mt-1{margin-top:.25rem}

.mt-2{margin-top:.5rem}

.mt-4{margin-top:1rem}

.mt-6{margin-top:1.5rem}

.mt-8{margin-top:2rem}

.mt-12{margin-top:3rem}

.mt-16{margin-top:4rem}

.mt-auto{margin-top:auto}

.mr-1{margin-right:.25rem}

.mr-2{margin-right:.5rem}

.mr-3{margin-right:.75rem}

.mr-4{margin-right:1rem}

.mb-1{margin-bottom:.25rem}

.mb-2{margin-bottom:.5rem}

.mb-3{margin-bottom:.75rem}

.mb-4{margin-bottom:1rem}

.mb-6{margin-bottom:1.5rem}

.mb-8{margin-bottom:2rem}

.mb-10{margin-bottom:2.5rem}

.mb-12{margin-bottom:3rem}

.mb-16{margin-bottom:4rem}

.ml-1{margin-left:.25rem}

.ml-2{margin-left:.5rem}

.ml-3{margin-left:.75rem}

.ml-4{margin-left:1rem}

.ml-auto{margin-left:auto}



/* ============================================

   Spacing - Space Between

   ============================================ */

.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem*var(--tw-space-x-reverse));margin-left:calc(.25rem*calc(1 - var(--tw-space-x-reverse)))}

.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*calc(1 - var(--tw-space-x-reverse)))}

.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*calc(1 - var(--tw-space-x-reverse)))}

.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*calc(1 - var(--tw-space-x-reverse)))}

.-space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(-.5rem*var(--tw-space-x-reverse));margin-left:calc(-.5rem*calc(1 - var(--tw-space-x-reverse)))}

.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}

.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}

.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}

.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}

.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}

.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}

.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}

.divide-white\/5>:not([hidden])~:not([hidden]){border-color:rgb(255 255 255/0.05)}



/* ============================================

   Sizing - Width

   ============================================ */

.w-2{width:.5rem}

.w-3{width:.75rem}

.w-3\.5{width:.875rem}

.w-4{width:1rem}

.w-5{width:1.25rem}

.w-6{width:1.5rem}

.w-8{width:2rem}

.w-10{width:2.5rem}

.w-12{width:3rem}

.w-14{width:3.5rem}

.w-16{width:4rem}

.w-20{width:5rem}

.w-32{width:8rem}

.w-48{width:12rem}

.w-56{width:14rem}

.w-64{width:16rem}

.w-auto{width:auto}

.w-full{width:100%}

.min-w-\[60px\]{min-width:60px}

.min-w-\[70px\]{min-width:70px}

.min-w-\[200px\]{min-width:200px}

.max-w-md{max-width:28rem}

.max-w-lg{max-width:32rem}

.max-w-2xl{max-width:42rem}

.max-w-3xl{max-width:48rem}

.max-w-4xl{max-width:56rem}

.max-w-5xl{max-width:64rem}

.max-w-6xl{max-width:72rem}

.max-w-7xl{max-width:80rem}

.max-w-none{max-width:none}



/* ============================================

   Sizing - Height

   ============================================ */

.h-1\.5{height:.375rem}

.h-2{height:.5rem}

.h-3{height:.75rem}

.h-3\.5{height:.875rem}

.h-4{height:1rem}

.h-5{height:1.25rem}

.h-6{height:1.5rem}

.h-8{height:2rem}

.h-9{height:2.25rem}

.h-10{height:2.5rem}

.h-12{height:3rem}

.h-14{height:3.5rem}

.h-16{height:4rem}

.h-20{height:5rem}

.h-32{height:8rem}

.h-44{height:11rem}

.h-48{height:12rem}

.h-64{height:16rem}

.h-72{height:18rem}

.h-80{height:20rem}

.h-full{height:100%}

.h-px{height:1px}

.min-h-full{min-height:100%}

.min-h-screen{min-height:100vh}

.min-h-\[70vh\]{min-height:70vh}

.min-h-\[80vh\]{min-height:80vh}

.max-h-72{max-height:18rem}



/* ============================================

   Sizing - Aspect Ratio

   ============================================ */

.aspect-video{aspect-ratio:16/9}

.aspect-square{aspect-ratio:1/1}



/* ============================================

   Typography - Font Size

   ============================================ */

.text-xs{font-size:.75rem;line-height:1rem}

.text-sm{font-size:.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-5xl{font-size:3rem;line-height:1}



/* ============================================

   Typography - Font Weight

   ============================================ */

.font-normal{font-weight:400}

.font-medium{font-weight:500}

.font-semibold{font-weight:600}

.font-bold{font-weight:700}



/* ============================================

   Typography - Line Height

   ============================================ */

.leading-none{line-height:1}

.leading-tight{line-height:1.25}

.leading-relaxed{line-height:1.625}



/* ============================================

   Typography - Letter Spacing

   ============================================ */

.tracking-tight{letter-spacing:-.025em}

.tracking-wide{letter-spacing:.025em}

.tracking-wider{letter-spacing:.05em}



/* ============================================

   Typography - Text Alignment

   ============================================ */

.text-left{text-align:left}

.text-center{text-align:center}

.text-right{text-align:right}



/* ============================================

   Typography - Text Transform

   ============================================ */

.uppercase{text-transform:uppercase}

.capitalize{text-transform:capitalize}



/* ============================================

   Typography - Text Decoration

   ============================================ */

.underline{text-decoration-line:underline}

.line-through{text-decoration-line:line-through}

.hover\:underline:hover{text-decoration-line:underline}



/* ============================================

   Typography - Text Color (Standard)

   ============================================ */

.text-white{color:#fff}

.text-white\/50{color:rgb(255 255 255/0.5)}

.text-white\/60{color:rgb(255 255 255/0.6)}

.text-white\/70{color:rgb(255 255 255/0.7)}

.text-white\/80{color:rgb(255 255 255/0.8)}

.text-black{color:#000}

.text-gray-300{color:#d1d5db}

.text-gray-400{color:#9ca3af}

.text-gray-500{color:#6b7280}

.text-slate-300{color:#cbd5e1}

.text-slate-400{color:#94a3b8}

.text-slate-500{color:#64748b}

.text-slate-600{color:#475569}

.text-slate-700{color:#334155}

.text-red-400{color:#f87171}

.text-red-600{color:#dc2626}

.text-green-400{color:#4ade80}

.text-green-500{color:#22c55e}

.text-blue-400{color:#60a5fa}

.text-blue-500{color:#3b82f6}

.text-yellow-400{color:#facc15}

.text-yellow-500{color:#eab308}

.text-orange-400{color:#fb923c}

.text-orange-500{color:#f97316}

.text-purple-400{color:#c084fc}

.text-purple-500{color:#a855f7}

.hover\:text-white:hover{color:#fff}

.hover\:text-red-300:hover{color:#fca5a5}

.hover\:text-red-400:hover{color:#f87171}



/* ============================================

   Typography - Line Clamp

   ============================================ */

.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}

.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}

.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}



/* ============================================

   Typography - Whitespace

   ============================================ */

.whitespace-nowrap{white-space:nowrap}



/* ============================================

   Backgrounds

   ============================================ */

.bg-white{background-color:#fff}

.bg-white\/5{background-color:rgb(255 255 255/0.05)}

.bg-white\/10{background-color:rgb(255 255 255/0.1)}

.bg-white\/20{background-color:rgb(255 255 255/0.2)}

.bg-white\/50{background-color:rgb(255 255 255/0.5)}

.bg-black\/60{background-color:rgb(0 0 0/0.6)}

.bg-black\/70{background-color:rgb(0 0 0/0.7)}

.bg-black\/80{background-color:rgb(0 0 0/0.8)}

.bg-gray-200{background-color:#e5e7eb}

.bg-gray-300{background-color:#d1d5db}

.bg-gray-700{background-color:#374151}

.bg-gray-800\/50{background-color:rgb(31 41 55/0.5)}

.bg-slate-600{background-color:#475569}

.bg-slate-700{background-color:#334155}

.bg-slate-700\/30{background-color:rgb(51 65 85/0.3)}

.bg-slate-700\/50{background-color:rgb(51 65 85/0.5)}

.bg-slate-800{background-color:#1e293b}

.bg-slate-800\/30{background-color:rgb(30 41 59/0.3)}

.bg-slate-800\/50{background-color:rgb(30 41 59/0.5)}

.bg-slate-800\/80{background-color:rgb(30 41 59/0.8)}

.bg-slate-800\/95{background-color:rgb(30 41 59/0.95)}

.bg-slate-900{background-color:#0f172a}

.bg-slate-900\/50{background-color:rgb(15 23 42/0.5)}

.bg-slate-900\/60{background-color:rgb(15 23 42/0.6)}

.bg-slate-900\/80{background-color:rgb(15 23 42/0.8)}

.bg-slate-900\/95{background-color:rgb(15 23 42/0.95)}

.bg-slate-900\/98{background-color:rgb(15 23 42/0.98)}

.bg-slate-500\/10{background-color:rgb(100 116 139/0.1)}

.bg-red-50{background-color:#fef2f2}

.bg-red-500{background-color:#ef4444}

.bg-red-500\/10{background-color:rgb(239 68 68/0.1)}

.bg-red-600{background-color:#dc2626}

.bg-green-400{background-color:#4ade80}

.bg-green-500{background-color:#22c55e}

.bg-green-500\/10{background-color:rgb(34 197 94/0.1)}

.bg-green-600{background-color:#16a34a}

.bg-blue-500\/10{background-color:rgb(59 130 246/0.1)}

.bg-yellow-500{background-color:#eab308}

.bg-yellow-500\/10{background-color:rgb(234 179 8/0.1)}

.bg-orange-500{background-color:#f97316}

.bg-orange-500\/10{background-color:rgb(249 115 22/0.1)}

.bg-orange-600{background-color:#ea580c}

.bg-purple-500\/10{background-color:rgb(168 85 247/0.1)}

.hover\:bg-white\/5:hover{background-color:rgb(255 255 255/0.05)}

.hover\:bg-white\/10:hover{background-color:rgb(255 255 255/0.1)}

.hover\:bg-white\/20:hover{background-color:rgb(255 255 255/0.2)}

.hover\:bg-white\/30:hover{background-color:rgb(255 255 255/0.3)}

.hover\:bg-slate-500:hover{background-color:#64748b}

.hover\:bg-slate-600:hover{background-color:#475569}

.hover\:bg-slate-700:hover{background-color:#334155}

.hover\:bg-slate-700\/30:hover{background-color:rgb(51 65 85/0.3)}

.hover\:bg-slate-700\/50:hover{background-color:rgb(51 65 85/0.5)}

.hover\:bg-slate-800:hover{background-color:#1e293b}

.hover\:bg-red-500:hover{background-color:#ef4444}

.hover\:bg-red-500\/10:hover{background-color:rgb(239 68 68/0.1)}

.hover\:bg-red-600:hover{background-color:#dc2626}

.hover\:bg-red-700:hover{background-color:#b91c1c}

.hover\:bg-green-600:hover{background-color:#16a34a}

.hover\:bg-green-700:hover{background-color:#15803d}

.hover\:bg-blue-600:hover{background-color:#2563eb}

.hover\:bg-blue-700:hover{background-color:#1d4ed8}

.hover\:bg-orange-600:hover{background-color:#ea580c}

.hover\:bg-orange-700:hover{background-color:#c2410c}

.hover\:bg-pink-600:hover{background-color:#db2777}

.hover\:bg-sky-500:hover{background-color:#0ea5e9}



/* ============================================

   Backgrounds - Gradients

   ============================================ */

.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}

.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}

.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}

.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}

.from-slate-800\/50{--tw-gradient-from:rgb(30 41 59/0.5) var(--tw-gradient-from-position);--tw-gradient-to:rgb(30 41 59/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}

.from-slate-900{--tw-gradient-from:#0f172a var(--tw-gradient-from-position);--tw-gradient-to:rgb(15 23 42/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}

.from-slate-900\/80{--tw-gradient-from:rgb(15 23 42/0.8) var(--tw-gradient-from-position);--tw-gradient-to:rgb(15 23 42/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}

.via-slate-800{--tw-gradient-to:rgb(30 41 59/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#1e293b var(--tw-gradient-via-position),var(--tw-gradient-to)}

.via-slate-800\/50{--tw-gradient-to:rgb(30 41 59/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgb(30 41 59/0.5) var(--tw-gradient-via-position),var(--tw-gradient-to)}

.via-slate-900\/40{--tw-gradient-to:rgb(15 23 42/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgb(15 23 42/0.4) var(--tw-gradient-via-position),var(--tw-gradient-to)}

.via-slate-900\/70{--tw-gradient-to:rgb(15 23 42/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgb(15 23 42/0.7) var(--tw-gradient-via-position),var(--tw-gradient-to)}

.to-slate-800{--tw-gradient-to:#1e293b var(--tw-gradient-to-position)}

.to-slate-800\/50{--tw-gradient-to:rgb(30 41 59/0.5) var(--tw-gradient-to-position)}

.to-slate-900\/30{--tw-gradient-to:rgb(15 23 42/0.3) var(--tw-gradient-to-position)}



/* ============================================

   Borders

   ============================================ */

.border{border-width:1px}

.border-0{border-width:0}

.border-2{border-width:2px}

.border-t{border-top-width:1px}

.border-r{border-right-width:1px}

.border-b{border-bottom-width:1px}

.border-white\/5{border-color:rgb(255 255 255/0.05)}

.border-white\/10{border-color:rgb(255 255 255/0.1)}

.border-white\/20{border-color:rgb(255 255 255/0.2)}

.border-gray-100{border-color:#f3f4f6}

.border-gray-200{border-color:#e5e7eb}

.border-gray-800{border-color:#1f2937}

.border-slate-600{border-color:#475569}

.border-slate-700{border-color:#334155}

.border-slate-800{border-color:#1e293b}

.border-red-200{border-color:#fecaca}

.border-red-500\/20{border-color:rgb(239 68 68/0.2)}

.border-green-500\/20{border-color:rgb(34 197 94/0.2)}

.border-orange-500\/20{border-color:rgb(249 115 22/0.2)}

.focus\:border-red-500:focus{border-color:#ef4444}



/* ============================================

   Border Radius

   ============================================ */

.rounded{border-radius:.25rem}

.rounded-lg{border-radius:.5rem}

.rounded-xl{border-radius:.75rem}

.rounded-2xl{border-radius:1rem}

.rounded-full{border-radius:9999px}

.rounded-b-xl{border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}

.rounded-bl-lg{border-bottom-left-radius:.5rem}



/* ============================================

   Effects - Shadow

   ============================================ */

.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0/0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}

.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}

.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0/0.1),0 8px 10px -6px rgb(0 0 0/0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}

.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0/0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}

.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}

.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgb(0 0 0/0.1),0 8px 10px -6px rgb(0 0 0/0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}



/* ============================================

   Effects - Opacity

   ============================================ */

.opacity-25{opacity:.25}

.opacity-50{opacity:.5}

.opacity-60{opacity:.6}

.opacity-75{opacity:.75}

.hover\:opacity-75:hover{opacity:.75}

.hover\:opacity-100:hover{opacity:1}

.group-hover\:opacity-100{opacity:1}

.disabled\:opacity-50:disabled{opacity:.5}



/* ============================================

   Effects - Blur & Backdrop

   ============================================ */

.backdrop-blur{--tw-backdrop-blur:blur(8px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}

.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}

.backdrop-blur-md{--tw-backdrop-blur:blur(12px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}

.backdrop-blur-\[2px\]{--tw-backdrop-blur:blur(2px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}



/* ============================================

   Filters

   ============================================ */

.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}

.hover\:grayscale-0:hover{--tw-grayscale:grayscale(0);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}



/* ============================================

   Rings

   ============================================ */

.focus\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}

.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}

.focus\:ring-red-500:focus{--tw-ring-color:#ef4444}

.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}

.focus\:ring-offset-slate-800:focus{--tw-ring-offset-color:#1e293b}

.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}



/* ============================================

   Transforms

   ============================================ */

.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.-translate-x-1\/2{--tw-translate-x:-50%}

.-translate-y-1\/2{--tw-translate-y:-50%}

.scale-150{--tw-scale-x:1.5;--tw-scale-y:1.5;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.hover\:-translate-y-1:hover{--tw-translate-y:-.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}



/* ============================================

   Transitions

   ============================================ */

.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,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(.4,0,.2,1);transition-duration:150ms}

.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}

.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}

.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}

.duration-300{transition-duration:300ms}

.duration-500{transition-duration:500ms}



/* ============================================

   Animations

   ============================================ */

.animate-spin{animation:spin 1s linear infinite}

.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}

.animate-bounce{animation:bounce 1s infinite}

@keyframes spin{to{transform:rotate(360deg)}}

@keyframes pulse{50%{opacity:.5}}

@keyframes bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}



/* ============================================

   Object Fit

   ============================================ */

.object-cover{object-fit:cover}

.object-contain{object-fit:contain}



/* ============================================

   Overflow

   ============================================ */

.overflow-hidden{overflow:hidden}

.overflow-x-auto{overflow-x:auto}

.overflow-y-auto{overflow-y:auto}



/* ============================================

   Cursor

   ============================================ */

.cursor-pointer{cursor:pointer}

.cursor-not-allowed{cursor:not-allowed}

.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}



/* ============================================

   Placeholder

   ============================================ */

.placeholder-dark\/40::placeholder{color:rgb(22 22 22/0.4)}

.placeholder-slate-500::placeholder{color:#64748b}



/* ============================================

   Resize

   ============================================ */

.resize-none{resize:none}



/* ============================================

   Scroll Behavior

   ============================================ */

.scroll-smooth{scroll-behavior:smooth}



/* ============================================

   Screen Reader Only

   ============================================ */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}



/* ============================================

   Group Hover States

   ============================================ */

.group:hover .group-hover\:bg-gold\/20{background-color:rgb(186 142 74/0.2)}

.group:hover .group-hover\:bg-primary{background-color:#e94560}

.group:hover .group-hover\:text-primary{color:#e94560}

.group:hover .group-hover\:text-white{color:#fff}

.group:hover .group-hover\:underline{text-decoration-line:underline}

.group:hover .group-hover\:opacity-100{opacity:1}

.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}



/* ============================================

   Last Child Variants

   ============================================ */

.last\:border-0:last-child{border-width:0}

.last\:mb-0:last-child{margin-bottom:0}

.last\:pb-0:last-child{padding-bottom:0}



/* ============================================

   Antialiased

   ============================================ */

.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}



/* ============================================

   Prose (Basic)

   ============================================ */

.prose{color:#374151;max-width:65ch}

.prose p{margin-top:1.25em;margin-bottom:1.25em}

.prose a{color:#e94560;text-decoration:underline}

.prose strong{font-weight:600}

.prose h1,.prose h2,.prose h3,.prose h4{font-weight:700;line-height:1.25}

.prose h1{font-size:2.25em;margin-top:0;margin-bottom:.888em}

.prose h2{font-size:1.5em;margin-top:2em;margin-bottom:1em}

.prose h3{font-size:1.25em;margin-top:1.6em;margin-bottom:.6em}

.prose ul,.prose ol{margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}

.prose li{margin-top:.5em;margin-bottom:.5em}

.prose-lg{font-size:1.125rem}



/* ============================================

   Alpine.js Cloak

   ============================================ */

[x-cloak]{display:none!important}



/* ============================================

   SM Breakpoint (640px)

   ============================================ */

@media(min-width:640px){

.sm\:block{display:block}

.sm\:hidden{display:none}

.sm\:flex{display:flex}

.sm\:inline-flex{display:inline-flex}

.sm\:flex-row{flex-direction:row}

.sm\:items-center{align-items:center}

.sm\:justify-between{justify-content:space-between}

.sm\:justify-center{justify-content:center}

.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.sm\:col-span-2{grid-column:span 2/span 2}

.sm\:p-6{padding:1.5rem}

.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}

.sm\:px-10{padding-left:2.5rem;padding-right:2.5rem}

.sm\:pt-48{padding-top:12rem}

.sm\:mx-auto{margin-left:auto;margin-right:auto}

.sm\:max-w-md{max-width:28rem}

.sm\:w-32{width:8rem}

.sm\:w-40{width:10rem}

.sm\:w-48{width:12rem}

.sm\:w-56{width:14rem}

.sm\:w-64{width:16rem}

.sm\:w-auto{width:auto}

.sm\:w-full{width:100%}

.sm\:h-96{height:24rem}

.sm\:text-2xl{font-size:1.5rem;line-height:2rem}

.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}

.sm\:text-5xl{font-size:3rem;line-height:1}

.sm\:text-6xl{font-size:3.75rem;line-height:1}

}



/* ============================================

   MD Breakpoint (768px)

   ============================================ */

@media(min-width:768px){

.md\:block{display:block}

.md\:flex-row{flex-direction:row}

.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\:h-80{height:20rem}

}



/* ============================================

   LG Breakpoint (1024px)

   ============================================ */

@media(min-width:1024px){

.lg\:block{display:block}

.lg\:hidden{display:none}

.lg\:flex{display:flex}

.lg\:inline-flex{display:inline-flex}

.lg\:grid{display:grid}

.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}

.lg\:col-span-1{grid-column:span 1/span 1}

.lg\:col-span-2{grid-column:span 2/span 2}

.lg\:order-1{order:1}

.lg\:order-2{order:2}

.lg\:p-6{padding:1.5rem}

.lg\:p-8{padding:2rem}

.lg\:px-6{padding-left:1.5rem;padding-right:1.5rem}

.lg\:px-8{padding-left:2rem;padding-right:2rem}

.lg\:py-16{padding-top:4rem;padding-bottom:4rem}

.lg\:py-20{padding-top:5rem;padding-bottom:5rem}

.lg\:py-24{padding-top:6rem;padding-bottom:6rem}

.lg\:pl-64{padding-left:16rem}

.lg\:h-12{height:3rem}

.lg\:h-20{height:5rem}

.lg\:h-96{height:24rem}

.lg\:text-2xl{font-size:1.5rem;line-height:2rem}

.lg\:text-5xl{font-size:3rem;line-height:1}

.lg\:text-6xl{font-size:3.75rem;line-height:1}

.lg\:text-7xl{font-size:4.5rem;line-height:1}

.lg\:translate-x-0{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

}



/* ============================================

   XL Breakpoint (1280px)

   ============================================ */

@media(min-width:1280px){

.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

}



/* ============================================

   Print Styles

   ============================================ */

@media print{

.no-print{display:none!important}

}



/* ============================================

   Hero Section - Height accounting for header

   ============================================ */

.min-h-\[80vh\]{

    min-height:80vh;

    min-height:80dvh; /* iOS Safari dynamic viewport */

}

/* Hero section accounts for sticky header (h-16 = 4rem) */

section.min-h-\[80vh\]{

    min-height:calc(100vh - 4rem);

    min-height:calc(100dvh - 4rem);

}



/* ============================================

   Hero Video Background (YouTube iframe)

   ============================================ */

section iframe[src*="youtube"],

.relative iframe {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 100vw;

    height: 100vh;

    height: 100dvh;

    min-width: 177.77vh;

    min-height: 56.25vw;

    transform: translate(-50%, -50%);

    pointer-events: none;

    z-index: 0;

}



/* Dark overlay on hero video - ensure gradients show */

section.bg-dark .absolute.inset-0:not(iframe):not(:first-child){

    z-index: 1;

}

section.bg-dark > .relative,

section.bg-dark > div:not(.absolute){

    z-index: 2;

}



/* Force gradient overlays to be visible */

.bg-gradient-to-r.from-dark,

.bg-gradient-to-t.from-dark{

    z-index: 1 !important;

}



/* ============================================

   Display & Heading Fonts - Always Uppercase

   ============================================ */

.font-display,

.font-heading{

    text-transform: uppercase;

}



/* ============================================

   Hero Video Container - Ensure overlays work

   ============================================ */

/* The video container */

section.bg-dark > .absolute.inset-0 {

    z-index: 0;

}

/* Iframe inside container */

section.bg-dark > .absolute.inset-0 > iframe {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 177.77vh;

    height: 100vh;

    height: 100dvh;

    min-width: 100%;

    transform: translate(-50%, -50%);

    pointer-events: none;

    z-index: 0;

}

/* Gradient overlays inside same container - stack on top of iframe */

section.bg-dark > .absolute.inset-0 > .absolute.inset-0 {

    z-index: 1;

}

/* Hero content */

section.bg-dark > .relative {

    z-index: 2;

}



/* ============================================

   HERO SECTION FIXES - CRITICAL

   ============================================ */



/* Hero section height - account for header */

section.relative.min-h-\[80vh\] {

    min-height: calc(100vh - 4rem) !important;

    min-height: calc(100dvh - 4rem) !important;

}



/* Dark overlay on video - FORCE visibility */

section.relative.bg-dark > .absolute.inset-0 {

    position: absolute !important;

    inset: 0 !important;

}



/* The gradient overlays MUST be visible */

section.relative.bg-dark .bg-gradient-to-r,

section.relative.bg-dark .bg-gradient-to-t {

    position: absolute !important;

    inset: 0 !important;

    z-index: 2 !important;

}



/* Make the gradient darker */

section.relative.bg-dark .bg-gradient-to-r.from-dark {

    background: linear-gradient(to right, #161616 0%, rgba(22,22,22,0.95) 30%, rgba(22,22,22,0.8) 60%, rgba(22,22,22,0.7) 100%) !important;

}



section.relative.bg-dark .bg-gradient-to-t.from-dark {

    background: linear-gradient(to top, #161616 0%, rgba(22,22,22,0.5) 40%, transparent 100%) !important;

}



/* YouTube iframe stays behind */

section.relative.bg-dark iframe {

    z-index: 1 !important;

}



/* Hero content stays on top */

section.relative.bg-dark > .relative {

    position: relative !important;

    z-index: 10 !important;

}



/* Scroll indicator positioning */

section.relative.bg-dark > .absolute.bottom-8 {

    z-index: 10 !important;

}



/* ============================================

   HERO HEIGHT FIX - Account for 64px header

   ============================================ */

section.relative.min-h-\[80vh\].bg-dark {

    min-height: calc(100vh - 64px) !important;

    min-height: calc(100dvh - 64px) !important;

    height: calc(100vh - 64px);

    height: calc(100dvh - 64px);

}



/* ============================================

   HERO HEIGHT - All Breakpoints (64px header)

   ============================================ */

section.relative.min-h-\[80vh\].bg-dark,

.min-h-\[80vh\] {

    min-height: calc(100vh - 64px) !important;

    min-height: calc(100dvh - 64px) !important;

    height: calc(100vh - 64px);

    height: calc(100dvh - 64px);

}



@media (max-width: 1023px) {

    section.relative.min-h-\[80vh\].bg-dark,

    .min-h-\[80vh\] {

        min-height: calc(100vh - 64px) !important;

        min-height: calc(100dvh - 64px) !important;

        height: calc(100vh - 64px);

        height: calc(100dvh - 64px);

    }

}



@media (max-width: 767px) {

    section.relative.min-h-\[80vh\].bg-dark,

    .min-h-\[80vh\] {

        min-height: calc(100vh - 64px) !important;

        min-height: calc(100dvh - 64px) !important;

        height: calc(100vh - 64px);

        height: calc(100dvh - 64px);

    }

}



@media (max-width: 639px) {

    section.relative.min-h-\[80vh\].bg-dark,

    .min-h-\[80vh\] {

        min-height: calc(100vh - 64px) !important;

        min-height: calc(100dvh - 64px) !important;

        height: calc(100vh - 64px);

        height: calc(100dvh - 64px);

    }

}



/* ============================================

   SECTION BACKGROUNDS WITH SVG

   ============================================ */



/* How It Works section - sand background with SVG */

section.how-it-works {

    background-color: #f8f6f3 !important;

    background-image: url('/media/background-element-1.svg') !important;

    background-size: cover !important;

    background-position: center !important;

    background-repeat: no-repeat !important;

}



/* Membership/Unlock Unlimited Access section */

section.membership-cta {

    background-color: #f8f6f3 !important;

    background-image: url('/media/background-element-2.svg') !important;

    background-size: cover !important;

    background-position: center !important;

    background-repeat: no-repeat !important;

}



/* Final CTA section - just sand background */

section.final-cta {

    background-color: #f8f6f3 !important;

}



/* ============================================

   ANIMATED TICKER

   ============================================ */

.ticker-wrapper {

    overflow: hidden;

    width: 100%;

    padding: 1rem 0;

}



.ticker-track {

    display: flex;

    align-items: center;

    gap: 2.5rem;

    width: max-content;

    animation: ticker-scroll 60s linear infinite;

}



.ticker-text {

    font-family: 'Veneer', Impact, sans-serif;

    font-size: clamp(2.5rem, 8vw, 5rem);

    line-height: 1;

    color: #161616;

    text-transform: uppercase;

    white-space: nowrap;

}



.ticker-logo {

    height: clamp(2.5rem, 8vw, 5rem);

    width: clamp(2.5rem, 8vw, 5rem);

    object-fit: contain;

    flex-shrink: 0;

}



@keyframes ticker-scroll {

    0% {

        transform: translateX(0);

    }

    100% {

        transform: translateX(-50%);

    }

}



/* Pause on hover for accessibility */

.ticker-wrapper:hover .ticker-track {

    animation-play-state: paused;

}



/* ============================================

   BOOK NOW BUTTON - Gold with Glow Pulse

   ============================================ */

.book-now-btn {

    background: linear-gradient(135deg, #ba8e4a 0%, #d4a85c 100%);

    color: #161616;

    font-weight: 600;

    text-transform: uppercase;

    transition: all 0.3s ease;

    animation: btn-glow 2.5s ease-in-out infinite;

}



.book-now-btn:hover {

    background: linear-gradient(135deg, #d4a85c 0%, #e5bc6e 100%);

    transform: scale(1.05);

}



@keyframes btn-glow {

    0%, 100% {

        box-shadow: 0 0 5px rgba(186, 142, 74, 0.4),

                    0 0 10px rgba(186, 142, 74, 0.2);

    }

    50% {

        box-shadow: 0 0 15px rgba(186, 142, 74, 0.6),

                    0 0 30px rgba(186, 142, 74, 0.4),

                    0 0 45px rgba(186, 142, 74, 0.2);

    }

}/* ===========================================

   Header Component Styles

   Extracted from header.php for performance

   =========================================== */



/* Mega Menu - Full Width */

.mega-menu-wrapper {

    position: fixed;

    left: 0;

    right: 0;

    top: 64px;

    z-index: 35;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-10px);

    transition: all 0.2s ease-out;

}



.mega-menu-wrapper.is-open {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.mega-menu-backdrop {

    background: rgba(248, 246, 243, 0.98);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(186, 142, 74, 0.2);

}



/* Region Headers */

.mega-region-header {

    font-family: 'Veneer Clean', sans-serif;

    font-size: 0.9rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.03em;

    color: #161616;

    padding-bottom: 0.625rem;

    margin-bottom: 0.625rem;

    border-bottom: 2px solid #ba8e4a;

    white-space: nowrap;

}



/* Location Links */

.mega-location-link {

    display: block;

    padding: 0.25rem 0;

    color: #444;

    font-family: 'DM Sans', sans-serif;

    font-size: 0.8125rem;

    line-height: 1.4;

    transition: color 0.15s;

}



.mega-location-link:hover {

    color: #ba8e4a;

}



/* 6 Column Grid */

.mega-menu-grid {

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 2rem;

}



@media (max-width: 1023px) {

    .mega-menu-grid {

        grid-template-columns: repeat(3, 1fr);

        gap: 1.5rem;

    }

}



@media (max-width: 767px) {

    .mega-menu-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 1rem;

    }

}



/* Mobile Locations Dropdown */

.mobile-locations-dropdown {

    max-height: 60vh;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

}



.mobile-locations-dropdown::-webkit-scrollbar {

    width: 4px;

}



.mobile-locations-dropdown::-webkit-scrollbar-track {

    background: rgba(0,0,0,0.05);

}



.mobile-locations-dropdown::-webkit-scrollbar-thumb {

    background: #ba8e4a;

    border-radius: 2px;

}



/* Shared Dropdown Base */

.dropdown-base {

    position: absolute;

    top: 100%;

    background: rgba(248, 246, 243, 0.98);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border-radius: 0.75rem;

    box-shadow: 0 10px 40px rgba(0,0,0,0.15);

    z-index: 50;

    border: 1px solid rgba(186, 142, 74, 0.2);

    overflow: hidden;

}



/* Regular Dropdown (About) */

.dropdown-menu {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    background: rgba(248, 246, 243, 0.95);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    min-width: 200px;

    border-radius: 0 0 0.5rem 0.5rem;

    box-shadow: 0 10px 40px rgba(0,0,0,0.1);

    z-index: 50;

    border: 1px solid rgba(186, 142, 74, 0.2);

    border-top: none;

}



.nav-item:hover .dropdown-menu {

    display: block;

}



.dropdown-menu a {

    color: #161616;

    transition: all 0.2s;

}



.dropdown-menu a:hover {

    background: rgba(186, 142, 74, 0.15);

    color: #161616;

}



/* Profile Dropdown */

.profile-dropdown {

    position: absolute;

    top: 100%;

    right: 0;

    margin-top: 0.5rem;

    background: rgba(248, 246, 243, 0.98);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    min-width: 220px;

    border-radius: 0.75rem;

    box-shadow: 0 10px 40px rgba(0,0,0,0.15);

    z-index: 50;

    border: 1px solid rgba(186, 142, 74, 0.2);

    overflow: hidden;

}



.profile-dropdown a {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.75rem 1rem;

    color: #161616;

    font-family: 'Veneer Clean', sans-serif;

    font-size: 0.9rem;

    transition: all 0.2s;

}



.profile-dropdown a:hover {

    background: rgba(186, 142, 74, 0.15);

}



.profile-dropdown a svg {

    width: 1.25rem;

    height: 1.25rem;

    opacity: 0.7;

}



.profile-dropdown .logout-link {

    color: #dc2626;

    border-top: 1px solid rgba(0,0,0,0.1);

}



.profile-dropdown .logout-link:hover {

    background: rgba(220, 38, 38, 0.1);

}/**

 * Property & Poppadoms - Custom Stylesheet

 * 

 * Custom CSS extending Tailwind with P&P brand styles.

 */



/* ============================================

   CSS Custom Properties (Variables)

   ============================================ */

:root {

    /* Brand Colors */

    --color-primary: #e63946;

    --color-primary-dark: #c1121f;

    --color-primary-light: #ff6b6b;

    

    /* Neutral Colors */

    --color-slate-900: #0f172a;

    --color-slate-800: #1e293b;

    --color-slate-700: #334155;

    --color-slate-600: #475569;

    --color-slate-500: #64748b;

    --color-slate-400: #94a3b8;

    --color-slate-300: #cbd5e1;

    

    /* Tier Colors */

    --color-tier-free: #6b7280;

    --color-tier-bronze: #cd7f32;

    --color-tier-silver: #c0c0c0;

    --color-tier-gold: #ffd700;

    

    /* Fonts */

    --font-display: 'Veneer', serif;

   --font-heading: 'Veneer Clean', serif;

--font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;



    /* Spacing */

    --header-height: 4rem;

    --header-height-lg: 5rem;

    

    /* Transitions */

    --transition-fast: 150ms ease;

    --transition-base: 300ms ease;

    --transition-slow: 500ms ease;

}



/* ============================================

   Color Utilities

   ============================================ */

.text-primary {

    color: var(--color-primary);

}



.bg-primary {

    background-color: var(--color-primary);

}



.bg-primary-dark {

    background-color: var(--color-primary-dark);

}



.hover\:bg-primary-dark:hover {

    background-color: var(--color-primary-dark);

}



.border-primary {

    border-color: var(--color-primary);

}



.ring-primary {

    --tw-ring-color: var(--color-primary);

}



.shadow-primary\/25 {

    --tw-shadow-color: rgba(230, 57, 70, 0.25);

    --tw-shadow: var(--tw-shadow-colored);

}



/* ============================================

   Base Styles

   ============================================ */

html {

    scroll-behavior: smooth;

}



body {

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



/* Custom scrollbar */

::-webkit-scrollbar {

    width: 8px;

    height: 8px;

}



::-webkit-scrollbar-track {

    background: var(--color-slate-800);

}



::-webkit-scrollbar-thumb {

    background: var(--color-slate-600);

    border-radius: 4px;

}



::-webkit-scrollbar-thumb:hover {

    background: var(--color-slate-500);

}



/* Selection */

::selection {

    background-color: var(--color-primary);

    color: white;

}



/* Focus styles */

*:focus-visible {

    outline: 2px solid var(--color-primary);

    outline-offset: 2px;

}



/* ============================================

   Typography

   ============================================ */

h1, h2, h3, h4, h5, h6 {

    font-family: var(--font-heading);

    line-height: 1.2;

}



/* ============================================

   Buttons

   ============================================ */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.625rem 1.25rem;

    font-size: 0.875rem;

    font-weight: 500;

    border-radius: 0.5rem;

    transition: all var(--transition-fast);

    cursor: pointer;

}



.btn-primary {

    background-color: var(--color-primary);

    color: white;

    box-shadow: 0 4px 14px 0 rgba(230, 57, 70, 0.25);

}



.btn-primary:hover {

    background-color: var(--color-primary-dark);

    box-shadow: 0 6px 20px 0 rgba(230, 57, 70, 0.35);

}



.btn-secondary {

    background-color: var(--color-slate-700);

    color: white;

}



.btn-secondary:hover {

    background-color: var(--color-slate-600);

}



.btn-outline {

    background-color: transparent;

    border: 1px solid rgba(255, 255, 255, 0.2);

    color: white;

}



.btn-outline:hover {

    background-color: rgba(255, 255, 255, 0.05);

    border-color: rgba(255, 255, 255, 0.3);

}



.btn-gold,

.book-now-btn {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    background-color: #ba8e4a !important;

    background: #ba8e4a !important;

    color: #161616 !important;

    font-family: 'Veneer Clean', sans-serif !important;

    font-weight: 700 !important;

    transition: all 0.2s ease !important;

}



.btn-gold:hover,

.book-now-btn:hover {

    background-color: #d4a85c !important;

    background: #d4a85c !important;

    color: #161616 !important;

}



@keyframes btn-glow {

    0%, 100% { box-shadow: 0 0 10px rgba(186, 142, 74, 0.4), 0 0 20px rgba(186, 142, 74, 0.2); }

    50% { box-shadow: 0 0 20px rgba(186, 142, 74, 0.6), 0 0 40px rgba(186, 142, 74, 0.4); }

}



select,

.form-select {

    background-color: #1f2937 !important;

    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.1) !important;

}



/* ============================================

   Forms

   ============================================ */

.form-input,

.form-select,

.form-textarea {

    width: 100%;

    background-color: rgba(30, 41, 59, 0.5);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 0.5rem;

    padding: 0.625rem 1rem;

    font-size: 0.875rem;

    color: white;

    transition: all var(--transition-fast);

}



.form-input:focus,

.form-select:focus,

.form-textarea:focus {

    outline: none;

    border-color: var(--color-primary);

    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.1);

}



.form-input::placeholder,

.form-textarea::placeholder {

    color: var(--color-slate-500);

}



.form-label {

    display: block;

    font-size: 0.875rem;

    font-weight: 500;

    color: var(--color-slate-300);

    margin-bottom: 0.5rem;

}



.form-error {

    font-size: 0.75rem;

    color: #ef4444;

    margin-top: 0.25rem;

}



/* Checkbox and Radio */

.form-checkbox,

.form-radio {

    width: 1rem;

    height: 1rem;

    border: 1px solid rgba(255, 255, 255, 0.2);

    background-color: transparent;

    cursor: pointer;

}



.form-checkbox {

    border-radius: 0.25rem;

}



.form-radio {

    border-radius: 50%;

}



.form-checkbox:checked,

.form-radio:checked {

    background-color: var(--color-primary);

    border-color: var(--color-primary);

}



/* ============================================

   Cards

   ============================================ */

.card {

    background-color: rgba(30, 41, 59, 0.5);

    backdrop-filter: blur(8px);

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 1rem;

    overflow: hidden;

    transition: all var(--transition-base);

}



.card:hover {

    border-color: rgba(230, 57, 70, 0.3);

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

}



.card-glass {

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.18);

}



/* ============================================

   Badges

   ============================================ */

.badge {

    display: inline-flex;

    align-items: center;

    padding: 0.25rem 0.625rem;

    font-size: 0.75rem;

    font-weight: 600;

    border-radius: 9999px;

}



.badge-primary {

    background-color: var(--color-primary);

    color: white;

}



.badge-success {

    background-color: #22c55e;

    color: white;

}



.badge-warning {

    background-color: #f59e0b;

    color: white;

}



.badge-danger {

    background-color: #ef4444;

    color: white;

}



.badge-tier-free {

    background-color: var(--color-tier-free);

    color: white;

}



.badge-tier-bronze {

    background-color: var(--color-tier-bronze);

    color: white;

}



.badge-tier-silver {

    background-color: var(--color-tier-silver);

    color: #1e293b;

}



.badge-tier-gold {

    background-color: var(--color-tier-gold);

    color: #1e293b;

}



/* ============================================

   Progress Bar

   ============================================ */

.progress {

    height: 0.375rem;

    background-color: var(--color-slate-700);

    border-radius: 9999px;

    overflow: hidden;

}



.progress-bar {

    height: 100%;

    background-color: var(--color-primary);

    border-radius: 9999px;

    transition: width var(--transition-slow);

}



.progress-bar-success {

    background-color: #22c55e;

}



.progress-bar-warning {

    background-color: #f59e0b;

}



/* ============================================

   Animations

   ============================================ */

@keyframes pulse-soft {

    0%, 100% {

        opacity: 1;

    }

    50% {

        opacity: 0.7;

    }

}



.animate-pulse-soft {

    animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

}



@keyframes fade-in {

    from {

        opacity: 0;

        transform: translateY(10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.animate-fade-in {

    animation: fade-in 0.3s ease-out forwards;

}



@keyframes slide-in-right {

    from {

        opacity: 0;

        transform: translateX(20px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



.animate-slide-in-right {

    animation: slide-in-right 0.3s ease-out forwards;

}



/* ============================================

   Utilities

   ============================================ */

/* Line clamp */

.line-clamp-2 {

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.line-clamp-3 {

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



/* Glassmorphism */

.glass {

    background: rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.1);

}



/* Gradient text */

.gradient-text {

    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



/* Hide scrollbar but keep functionality */

.scrollbar-hide {

    -ms-overflow-style: none;

    scrollbar-width: none;

}



.scrollbar-hide::-webkit-scrollbar {

    display: none;

}



/* Aspect ratios */

.aspect-video {

    aspect-ratio: 16 / 9;

}



.aspect-square {

    aspect-ratio: 1 / 1;

}



/* ============================================

   Alpine.js Cloak

   ============================================ */

[x-cloak] {

    display: none !important;

}



/* ============================================

   Print Styles

   ============================================ */

@media print {

    .no-print {

        display: none !important;

    }

    

    body {

        background: white !important;

        color: black !important;

    }

    

    .card {

        border: 1px solid #ccc !important;

        background: white !important;

    }

}