:root {
    --background: #F8FAFC;
    --foreground: #1E293B;

    /* Font */
    --font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;

    /* Brand colours */
    --color-brand-slate:       #1E293B;
    --color-brand-blue:        #4468BC;   /* Mosaic Blue — primary */
    --color-brand-blue-deep:   #3555A0;   /* hover */
    --color-brand-blue-light:  #EBF0FA;   /* tinted backgrounds */
    --color-brand-terra:       #E35335;   /* Terracotta — CTA accent */
    --color-brand-terra-deep:  #C4412A;   /* CTA hover */
    --color-brand-terra-light: #FEF0ED;   /* warm highlights */
    --color-brand-warm-grey:   #F8FAFC;   /* page background */

    /* Type scale — mobile */
    --font-size-80:   3.3125rem;
    --line-height-80: 3.5rem;
    --font-size-48:   2rem;
    --line-height-48: 2.1875rem;
    --font-size-36:   1.6875rem;
    --line-height-36: 1.875rem;
}

@media (min-width: 75rem) {
    :root {
        --font-size-80:   5rem;
        --line-height-80: 5rem;
        --font-size-48:   3rem;
        --line-height-48: 3.125rem;
        --font-size-36:   2.25rem;
        --line-height-36: 2.5rem;
    }
}


@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --font-sans: var(--font-inter);
}

body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-inter);
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

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

/* Tile entrance animations — mosaic headline */
@keyframes tile-in-left {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes tile-in-right {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes tile-in-top {
    from { opacity: 0; transform: translateY(-18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes tile-in-bottom {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay:    0ms   !important;
        transition-duration: 0.01ms !important;
    }
}


/* ── Entrance animation helpers ───────────────────────────────────────── */
.t-in-0 { animation: tile-in-bottom 0.40s ease-out 0.00s both; }
.t-in-1 { animation: tile-in-bottom 0.40s ease-out 0.08s both; }
.t-in-2 { animation: tile-in-bottom 0.55s ease-out 0.16s both; }
.t-in-3 { animation: tile-in-bottom 0.40s ease-out 0.30s both; }
.t-in-4 { animation: tile-in-bottom 0.50s ease-out 0.38s both; }
.t-in-5 { animation: tile-in-bottom 0.50s ease-out 0.48s both; }
.t-in-6 { animation: tile-in-bottom 0.40s ease-out 0.58s both; }

/* ── Phone animation helpers ──────────────────────────────────────────── */
.cursor-blink {
    display: inline-block;
    width: 1px;
    height: 1.05em;
    background-color: #4468BC;
    vertical-align: middle;
    margin-left: 1px;
    animation: cursor-blink 1s step-end infinite;
}
.spin { animation: spin 0.8s linear infinite; }


/* ══════════════════════════════════════════════════════════════════════════
   Landing page component styles
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page layout ─────────────────────────────────────────────────────────── */
.landing-main {
    @apply relative min-h-screen overflow-hidden;
    background: linear-gradient(to bottom, #ffffff, var(--color-brand-warm-grey));
}

/* Shared overlay container (full-bleed, no pointer events) */
.landing-overlay {
    @apply pointer-events-none absolute inset-0;
}

/* Background blobs */
.landing-blob { @apply absolute rounded-full; }

.landing-blob--tr {
    top: -8%; right: -8%;
    width: 640px; height: 640px;
    background: radial-gradient(circle, rgba(68,104,188,0.07) 0%, transparent 68%);
}

.landing-blob--bl {
    bottom: -4%; left: -6%;
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(235,240,250,0.9) 0%, transparent 70%);
}

/* Hero wrapper & grid */
.landing-hero         { @apply relative flex min-h-screen items-center; }
.landing-hero__inner  { @apply mx-auto w-full max-w-7xl px-6 py-20 lg:px-16; }
.landing-hero__grid   { @apply grid items-center gap-16 lg:grid-cols-2 lg:gap-20; }

/* ── Copy column ─────────────────────────────────────────────────────────── */
.landing-copy { @apply flex flex-col gap-7; }

.landing-wordmark-row { @apply flex items-center gap-2; }

.landing-wordmark {
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
    color: var(--color-brand-slate);
}

.landing-wordmark__glyph {
    flex-shrink: 0;
    margin-top: 1px;
}

.landing-eyebrow {
    @apply inline-flex items-center gap-1.5 self-start rounded-full px-3 py-1;
    background-color: var(--color-brand-blue-light);
}

.landing-eyebrow__dot {
    @apply h-1.5 w-1.5 rounded-full;
    flex-shrink: 0;
    background-color: var(--color-brand-blue);
}

.landing-eyebrow__text {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-brand-blue-deep);
}

.landing-headline {
    font-size: var(--font-size-80);
    line-height: var(--line-height-80);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--color-brand-slate);
}

.landing-rule {
    height: 1.5px;
    border-radius: 1px;
    background: linear-gradient(to right, rgba(68,104,188,0.19), rgba(68,104,188,0.04), transparent);
}

.landing-body {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--color-brand-slate);
    opacity: 0.62;
    max-width: 44ch;
}

/* ── CTAs ────────────────────────────────────────────────────────────────── */
.landing-cta-group { @apply flex flex-wrap items-center gap-3; }

.landing-cta-primary {
    @apply inline-flex items-center gap-2.5 rounded-lg px-7 py-3.5 text-base font-medium text-white;
    background-color: var(--color-brand-terra);
    box-shadow: 0 4px 18px rgba(227,83,53,0.22);
    transition: background-color 0.15s ease;
}
.landing-cta-primary:hover { background-color: var(--color-brand-terra-deep); }

.landing-cta-secondary {
    @apply inline-flex items-center gap-2 text-base font-medium;
    color: var(--color-brand-slate);
    transition: color 0.15s ease;
}
.landing-cta-secondary:hover { color: var(--color-brand-blue); }

.landing-trust {
    @apply text-sm;
    color: var(--color-brand-slate);
    opacity: 0.38;
}

/* ── Phone mockup column ─────────────────────────────────────────────────── */
.landing-phone-col { @apply flex justify-center lg:justify-end; }

#phone-wrap {
    width: 316px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.landing-phone {
    background: #ffffff;
    border-radius: 2.5rem;
    overflow: hidden;
    box-shadow:
        0 40px 80px rgba(30,41,59,0.13),
        0 10px 28px rgba(30,41,59,0.07),
        inset 0 0 0 1px rgba(30,41,59,0.06);
}

.landing-phone__nav {
    @apply flex items-center justify-between px-5 pb-4 pt-6;
    background-color: var(--color-brand-blue);
}

.landing-phone__nav-wordmark {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-transform: lowercase;
}

.landing-phone__add-btn {
    @apply flex h-8 w-8 items-center justify-center rounded-full;
    background-color: var(--color-brand-terra);
}

.landing-phone__screen {
    @apply space-y-3 p-4;
    padding-bottom: 1.25rem;
}

.landing-phone__profile {
    @apply flex items-center gap-3 rounded-xl p-3;
    background-color: var(--color-brand-warm-grey);
}

.landing-phone__avatar {
    @apply flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-bold;
    background-color: rgba(68,104,188,0.12);
    color: var(--color-brand-blue);
}

.landing-phone__profile-info { @apply min-w-0; }
.landing-phone__profile-name { @apply text-sm font-semibold; color: var(--color-brand-slate); }
.landing-phone__profile-sub  { @apply text-xs; color: var(--color-brand-slate); opacity: 0.45; }

.landing-phone__field-label {
    @apply mb-1.5 block text-xs font-medium;
    color: var(--color-brand-slate);
    opacity: 0.5;
}

#obs-field {
    @apply w-full rounded-xl border px-3 py-2.5 text-sm leading-relaxed;
    min-height: 70px;
    color: var(--color-brand-slate);
    border-color: rgba(30,41,59,0.12);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.4s ease;
}

.landing-phone__placeholder {
    color: var(--color-brand-slate);
    opacity: 0.25;
}

/* Initial state — JS overrides display to show/hide */
#obs-cursor { display: none; }

#tags-wrap {
    @apply flex gap-2;
    transition: opacity 0.4s ease;
}

.landing-phone__tag {
    @apply rounded-full px-2.5 py-1 text-xs font-medium;
    background-color: var(--color-brand-blue-light);
    color: var(--color-brand-blue);
}

#save-btn {
    @apply w-full rounded-xl py-3 text-sm font-medium;
    background-color: rgba(30,41,59,0.05);
    color: rgba(30,41,59,0.28);
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.landing-phone__timeline {
    @apply border-t pt-3;
    border-color: rgba(30,41,59,0.07);
}

.landing-phone__timeline-label {
    @apply mb-2.5 font-medium uppercase;
    font-size: 0.625rem;
    color: var(--color-brand-slate);
    opacity: 0.35;
    letter-spacing: 0.1em;
}

#new-card-wrap {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
        max-height 0.55s cubic-bezier(0.4,0,0.2,1),
        opacity 0.45s ease-out;
}

.landing-phone__new-card {
    @apply mb-1 rounded-xl p-3;
    background-color: var(--color-brand-blue-light);
}

.landing-phone__new-card-header { @apply mb-1 flex items-center gap-1.5; }

.landing-phone__check-icon {
    @apply flex h-4 w-4 items-center justify-center rounded-full;
    background-color: var(--color-brand-blue);
}

.landing-phone__card-meta {
    @apply font-semibold;
    font-size: 0.625rem;
    color: var(--color-brand-blue);
}

.landing-phone__card-text {
    @apply text-xs leading-relaxed;
    color: var(--color-brand-slate);
    opacity: 0.72;
}

.landing-phone__card-tags { @apply mt-1.5 flex gap-1.5; }

.landing-phone__card-tag {
    @apply rounded-full px-2 py-0.5 font-medium;
    font-size: 0.625rem;
    background-color: rgba(68,104,188,0.14);
    color: var(--color-brand-blue);
}

.landing-phone__obs-card {
    @apply rounded-xl p-3;
    border: 1px solid rgba(30,41,59,0.07);
}

.landing-phone__obs-date {
    @apply mb-0.5 font-medium;
    font-size: 0.625rem;
    color: var(--color-brand-slate);
    opacity: 0.35;
}

.landing-phone__obs-text {
    @apply text-xs leading-relaxed;
    color: var(--color-brand-slate);
    opacity: 0.55;
}

.landing-phone__tagline {
    @apply mt-4 text-center text-sm font-medium;
    color: var(--color-brand-slate);
    opacity: 0.32;
    letter-spacing: -0.01em;
}