/* Font definitions */
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/_next/static/media/034d78ad42e9620c-s.woff2) format("woff2");
    unicode-range: u+0900-097f,u+1cd0-1cf9,u+200c-200d,u+20a8,u+20b9,u+20f0,u+25cc,u+a830-a839,u+a8e0-a8ff,u+11b00-11b09;
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/_next/static/media/fe0777f1195381cb-s.woff2) format("woff2");
    unicode-range: u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff;
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/_next/static/media/eafabf029ad39a43-s.p.woff2) format("woff2");
    unicode-range: u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd;
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/_next/static/media/db911767852bc875-s.woff2) format("woff2");
    unicode-range: u+0900-097f,u+1cd0-1cf9,u+200c-200d,u+20a8,u+20b9,u+20f0,u+25cc,u+a830-a839,u+a8e0-a8ff,u+11b00-11b09;
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/_next/static/media/f10b8e9d91f3edcb-s.woff2) format("woff2");
    unicode-range: u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff;
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/_next/static/media/8888a3826f4a3af4-s.p.woff2) format("woff2");
    unicode-range: u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd;
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/_next/static/media/29e7bbdce9332268-s.woff2) format("woff2");
    unicode-range: u+0900-097f,u+1cd0-1cf9,u+200c-200d,u+20a8,u+20b9,u+20f0,u+25cc,u+a830-a839,u+a8e0-a8ff,u+11b00-11b09;
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/_next/static/media/c3bc380753a8436c-s.woff2) format("woff2");
    unicode-range: u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff;
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/_next/static/media/0484562807a97172-s.p.woff2) format("woff2");
    unicode-range: u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd;
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/_next/static/media/29a4aea02fdee119-s.woff2) format("woff2");
    unicode-range: u+0900-097f,u+1cd0-1cf9,u+200c-200d,u+20a8,u+20b9,u+20f0,u+25cc,u+a830-a839,u+a8e0-a8ff,u+11b00-11b09;
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/_next/static/media/a1386beebedccca4-s.woff2) format("woff2");
    unicode-range: u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff;
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/_next/static/media/b957ea75a84b6ea7-s.p.woff2) format("woff2");
    unicode-range: u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd;
}

@font-face {
    font-family: Poppins Fallback;
    src: local("Arial");
    ascent-override: 93.62%;
    descent-override: 31.21%;
    line-gap-override: 8.92%;
    size-adjust: 112.16%;
}

/* Open Sans Font */
@font-face {
    font-family: Open Sans Fallback;
    src: local("Arial");
    ascent-override: 101.65%;
    descent-override: 27.86%;
    line-gap-override: 0.00%;
    size-adjust: 105.15%;
}

/* Font variable classes */
.font-poppins {
    font-family: Poppins, Poppins Fallback;
    font-style: normal;
}

.font-open-sans {
    font-family: Open Sans, Open Sans Fallback;
    font-style: normal;
}

/* Root variables */
:root {
    --background: 0 0% 100%;
    --foreground: 215 28% 17%;
    --card: 0 0% 100%;
    --card-foreground: 215 28% 17%;
    --popover: 0 0% 100%;
    --popover-foreground: 215 28% 17%;
    --primary: 45 100% 58%;
    --primary-foreground: 215 28% 17%;
    --secondary: 200 30% 26%;
    --secondary-foreground: 0 0% 100%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215 28% 40%;
    --accent: 45 100% 58%;
    --accent-foreground: 215 28% 17%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 45 100% 58%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
}

/* Dark mode variables */
.dark {
    --background: 210 29% 24%;
    --foreground: 0 0% 100%;
    --card: 210 32% 21%;
    --card-foreground: 0 0% 100%;
    --popover: 210 29% 24%;
    --popover-foreground: 0 0% 100%;
    --primary: 45 100% 58%;
    --primary-foreground: 210 29% 24%;
    --secondary: 0 0% 100%;
    --secondary-foreground: 210 29% 24%;
    --muted: 217 33% 17%;
    --muted-foreground: 215 20% 65%;
    --accent: 45 100% 50%;
    --accent-foreground: 210 29% 24%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 217 33% 19%;
    --input: 217 33% 19%;
    --ring: 45 100% 50%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
}

/* Base styles */
* {
    border-color: hsl(var(--border));
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .2s;
    animation-duration: .2s;
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-feature-settings: "rlig" 1,"calt" 1;
    font-family: Arial, Helvetica, sans-serif;
}

/* --- How It Works custom additions (TODO resolutions) --- */
/* Image sizing: design 1200x900 ratio -> on site 550x412 (approx 4:3). Maintain aspect ratio proportionally on smaller screens */
.hiw-image-wrapper { 
    width: 100%;
    max-width: 550px; 
    aspect-ratio: 1200 / 900; /* Keeps 4:3-ish ratio */
    height: auto; 
}
.hiw-image-wrapper img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: center; 
}
@media (max-width: 768px) {
    .hiw-image-wrapper { max-width: 100%; }
}

/* Button styles for how-it-works navigation */
#how-it-works .button { 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
    padding: 10px 18px; 
    border-radius: 6px; 
    font-weight: 500; 
    font-size: 16px; 
    line-height: 1.2; 
    transition: all .2s ease; 
    border: 2px solid hsl(var(--secondary));
}

/* Previous buttons: white with teal blue border/text */
#how-it-works .prev-btn.button { 
    background:#fff; 
    color: hsl(var(--secondary)); 
    border: 1px solid var(--color-dark-blue);
}
#how-it-works .prev-btn.button:hover:not(:disabled) { 
    background: hsl(var(--secondary)); 
    color:#fff; 
}

#how-it-works .next-btn.button, #how-it-works .button { 
    border: 0;
}


/* Disabled state refinement */
#how-it-works .prev-btn.button:disabled { opacity:.55; cursor:not-allowed; }

/* Mobile refinement: stack buttons full-width with better readability */
@media (max-width: 640px) {
    #how-it-works .flex.space-x-4.pt-4 { 
        flex-direction: column; 
        gap: 12px; 
    }
    /* Remove horizontal spacing injected by utility (space-x-4) */
    #how-it-works .flex.space-x-4.pt-4 > * + * { margin-left: 0 !important; }
    #how-it-works .button { 
        width: 100%; 
        justify-content: center; 
        font-size: 15px; 
        padding: 14px 20px; 
        line-height: 1.3; 
        white-space: normal; 
    }
    #how-it-works .button svg { flex-shrink: 0; }
}

/* Animation keyframes */
@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    to {
        transform: translateY(0);
    }
}

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

.animate-float {
    animation: float 6s ease-in-out infinite;
}

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

/* Utility classes */
.bg-background {
    background-color: hsl(var(--background));
}

.bg-primary {
    background-color: hsl(var(--primary));
}

.bg-primary\/5 {
    background-color: hsl(var(--primary)/.05);
}

.bg-primary\/10 {
    background-color: hsl(var(--primary)/.1);
}

.bg-primary\/20 {
    background-color: hsl(var(--primary)/.2);
}

.bg-primary\/30 {
    background-color: hsl(var(--primary)/.3);
}

.bg-muted {
    background-color: hsl(var(--muted));
}

.bg-card {
    background-color: hsl(var(--card));
}

.bg-background\/80 {
    background-color: hsl(var(--background)/.8);
}

.text-foreground {
    color: var(--color-dark-blue);
}

.text-primary {
    color: hsl(var(--primary));
}

.text-primary-foreground {
    color: hsl(var(--primary-foreground));
}

.text-primary-foreground\/80 {
    color: hsl(var(--primary-foreground)/.8);
}

.text-muted-foreground {
    color: hsl(var(--muted-foreground));
}

.border-border {
    border-color: hsl(var(--border));
}

.border-muted {
    border-color: hsl(var(--muted));
}

.hover\:bg-primary\/90:hover {
    background-color: hsl(var(--primary)/.9);
}

.hover\:bg-muted:hover {
    background-color: hsl(var(--muted));
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px 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-sm {
    --tw-shadow: 0 1px 2px 0 rgba(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);
}

.hover\:shadow-md:hover {
    --tw-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}

/* Group hover utilities */
.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));
}

/* Media queries */
@media (min-width: 768px) {
    .md\:order-1 {
        order: 1;
    }
    .md\:order-2 {
        order: 2;
    }
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .md\:hidden {
        display: none;
    }
    .md\:p-8 {
        padding: 2rem;
    }
    .md\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}