/* Reset and Base Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --cubby-bg: #FFFDF5; /* Warm off-white/cream background */
    --cubby-orange: #F59E0B; /* Primary Orange/Amber */
    --cubby-orange-hover: #D97706;
    --cubby-dark: #1F2937; /* Dark slate for text */
    --cubby-text-light: #4B5563; /* Gray for secondary text */
}

body {
    background-color: var(--cubby-bg);
    color: var(--cubby-dark);
    font-family: 'Nunito', sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background-color: rgba(245, 158, 11, 0.3);
}

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

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Layout Utilities */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

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

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

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

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

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

.flex {
    display: flex;
}

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

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

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

.flex-grow {
    flex-grow: 1;
}

.grid {
    display: grid;
}

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

.gap-12 {
    gap: 3rem;
}

.gap-4 {
    gap: 1rem;
}

.space-y-6>*+* {
    margin-top: 1.5rem;
}

.space-x-6>*+* {
    margin-left: 1.5rem;
}

/* Typography */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.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.1;
}

@media (min-width: 640px) {
    .sm\:text-6xl {
        font-size: 3.75rem;
        line-height: 1.1;
    }
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.font-medium {
    font-weight: 500;
}

.tracking-tight {
    letter-spacing: -0.025em;
}

.leading-tight {
    line-height: 1.25;
}

.leading-relaxed {
    line-height: 1.625;
}

.text-white {
    color: white;
}

.text-cubby-orange {
    color: var(--cubby-orange);
}

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

.bg-cubby-orange {
    background-color: var(--cubby-orange);
}

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

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

.text-slate-600 {
    color: #4B5563;
}

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

.hover\:text-white:hover {
    color: white;
}

.hover\:text-blue-300:hover {
    color: #93c5fd;
}

.underline {
    text-decoration: underline;
}

.no-underline {
    text-decoration: none;
}

/* Components */
.min-h-screen {
    min-height: 100vh;
    min-height: 100svh;
}

.app-store-btn {
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}

.app-store-btn:hover {
    transform: scale(1.05);
    background-color: transparent; /* Remove background color */
    box-shadow: none; /* Remove box-shadow */
}

/* Ensure no border or outline on hover/focus */
.app-store-btn:focus,
.app-store-btn:active {
    outline: none;
    border: none;
}

.app-store-img {
    height: 3.5rem; /* Explicit height */
    width: auto;     /* Auto width to maintain aspect ratio */
    display: block;  /* Block display to remove inline spacing */
}

.cubby-hero svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Hero copy. Both lines scale with the viewport between phone and desktop
   sizes, so the headline never dwarfs a small screen. */
.cubby-headline {
    font-size: clamp(1.75rem, 7.2vw, 3.75rem);
    line-height: 1.15;
}

.cubby-tagline {
    font-size: clamp(1rem, 4.2vw, 1.25rem);
    line-height: 1.5;
}



/* Wordmark. Sits directly above the hero, centred by the hero's own
   column layout, and scales with the viewport like the animation below it. */
.cubby-wordmark {
    display: block;
    width: clamp(280px, 52vw, 560px);
    height: auto;
    margin-bottom: 1.5rem;
}

/* The wordmark standing in for a back link on the legal pages: centred, and
   three quarters of the hero mark so it still leads the page. */
.cubby-wordmark-back {
    display: block;
}

.cubby-wordmark-back-mark {
    display: block;
    width: clamp(210px, 39vw, 420px);
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* Background Elements */
.bg-cubby-gradient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -10;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(255, 237, 213, 0.5) 0%, rgba(255, 253, 245, 0) 70%);
}

/* Footer */
.footer {
    background-color: transparent;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    margin-top: auto;
}

.footer p, .footer a {
    color: var(--cubby-text-light);
}

.footer a:hover {
    color: var(--cubby-orange);
}

/* Utilities */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.z-10 {
    z-index: 10;
}

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

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

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

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

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

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

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

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

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

.list-disc {
    list-style-type: disc;
}

.inline-block {
    display: inline-block;
}

.pl-6 {
    padding-left: 1.5rem;
}

/* Prose (simplified) */
.prose {
    max-width: 65ch;
    color: var(--cubby-text-light);
}

.prose h1,
.prose h2,
.prose h3 {
    color: var(--cubby-dark);
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.3333333;
}

.prose strong {
    color: var(--cubby-dark);
    font-weight: 600;
}

.prose a {
    color: var(--cubby-orange);
    text-decoration: underline;
    font-weight: 500;
}

.prose a:hover {
    color: var(--cubby-orange-hover);
}

/* On phones the hero column tightens its vertical rhythm so the wordmark,
   bear, copy, and App Store button all fit on one screen together. It also
   anchors to the top instead of centering: Safari's smart app banner pushes
   the document down by an amount the page cannot observe, so a centered
   column drifts low whenever the banner shows, leaving a large gap above the
   wordmark and crowding the button against the toolbar. Top-anchoring keeps
   the wordmark a fixed step below the page top and lets any leftover space
   breathe between the button and the footer. */
@media (max-width: 639px) {
    .cubby-hero-column {
        justify-content: flex-start;
        padding-top: 1rem;
        padding-bottom: 1.25rem;
    }

    .cubby-hero-column .cubby-wordmark {
        margin-bottom: 0.75rem;
    }

    .cubby-hero-column .cubby-hero {
        margin-bottom: 1rem;
    }

    .cubby-hero-column .mb-10 {
        margin-bottom: 1.25rem;
    }

    .cubby-hero-column .cubby-headline {
        margin-bottom: 0.5rem;
    }

    .cubby-hero-column .cubby-tagline {
        margin-top: 0.5rem;
    }
}