/* Unroomies landing page.
   Same tokens as the app: warm cream ground, amber accent, Lora for headlines
   and Raleway for everything else. A warm lamp in the evening, never a clinic. */

:root {
    --canvas: #FFF6EC;
    --surface: #FFFFFF;
    --muted: #FFEBD8;
    --hairline: #FBDCC0;
    --tx: #1A0B04;
    --tx2: #4A2A16;
    --tx3: #6B4327;
    --brand: #EA580C;
    --brand-soft: #FB923C;
    --violet: #7C3AED;
    --pink: #EC4899;
    --progress: #0D9488;
    --shadow-1: 0 2px 10px rgba(180, 80, 20, 0.08);
    --shadow-2: 0 10px 28px rgba(180, 80, 20, 0.14);
    --max: 1080px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --canvas: #1A1310;
        --surface: #251C17;
        --muted: #31241D;
        --hairline: #4A382D;
        --tx: #FDF3E9;
        --tx2: #E3CDBA;
        --tx3: #B79A85;
        --brand: #FB923C;
        --brand-soft: #FDBA74;
        --progress: #2DD4BF;
        --shadow-1: 0 2px 10px rgba(0, 0, 0, 0.45);
        --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.5);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--canvas);
    color: var(--tx);
    font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: Lora, Georgia, "Times New Roman", serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.18;
    margin: 0 0 16px;
}

h1 { font-size: clamp(38px, 6vw, 62px); }
h2 { font-size: clamp(28px, 4vw, 40px); }
h3 { font-size: 21px; }

p { margin: 0 0 16px; color: var(--tx2); }

/* Hero ------------------------------------------------------------------ */

.hero {
    position: relative;
    overflow: hidden;
    padding: 88px 24px 96px;
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    align-items: center;
    justify-content: center;
}

/* the soft glows, the same ones the app's cold open uses */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}

.hero::before {
    width: 420px; height: 420px;
    background: var(--brand-soft);
    opacity: 0.30;
    top: -140px; right: -80px;
}

.hero::after {
    width: 380px; height: 380px;
    background: var(--pink);
    opacity: 0.18;
    bottom: -180px; left: -100px;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 560px;
}

.logo-container img,
.logo-container { max-width: 76px; border-radius: 18px; margin-bottom: 28px; }

.hero-subtitle {
    font-size: 19px;
    color: var(--tx2);
    max-width: 30em;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
    align-items: center;
}

.cta-buttons img { height: 52px; width: auto; }

.hero-image {
    position: relative;
    z-index: 1;
    max-width: 360px;
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: 32px;
    box-shadow: var(--shadow-2);
}

/* Sections -------------------------------------------------------------- */

.section {
    padding: 80px 24px;
}

.section > h2,
.section > p {
    max-width: var(--max);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section > p { max-width: 44em; font-size: 18px; }

.variation2 { background: var(--muted); }

.grid {
    max-width: var(--max);
    margin: 44px auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.card {
    background: var(--surface);
    border-radius: 22px;
    padding: 30px 28px;
    box-shadow: var(--shadow-1);
}

.card h3 { color: var(--tx); }
.card p { margin-bottom: 0; font-size: 16px; }

/* the five pattern tints, so the cards echo the app's marks */
.grid .card:nth-child(1) { border-top: 3px solid var(--brand); }
.grid .card:nth-child(2) { border-top: 3px solid var(--violet); }
.grid .card:nth-child(3) { border-top: 3px solid var(--pink); }

/* CTA ------------------------------------------------------------------- */

.cta {
    padding: 96px 24px;
    text-align: center;
    background: var(--canvas);
}

.cta h2 { max-width: 16em; margin-inline: auto; }
.cta p { max-width: 34em; margin-inline: auto; font-size: 18px; }

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

/* Footer ---------------------------------------------------------------- */

footer {
    padding: 44px 24px 56px;
    text-align: center;
    color: var(--tx3);
    font-size: 15px;
    border-top: 1px solid var(--hairline);
}

footer a { color: var(--tx3); text-decoration: underline; text-underline-offset: 3px; }
footer a:hover { color: var(--brand); }

/* Legal pages ----------------------------------------------------------- */

.legal {
    max-width: 46em;
    margin: 0 auto;
    padding: 64px 24px 96px;
}

.legal h1 { font-size: clamp(32px, 5vw, 44px); margin-bottom: 8px; }
.legal .updated { color: var(--tx3); font-size: 15px; margin-bottom: 40px; }
.legal h2 { font-size: 24px; margin-top: 40px; }
.legal ul { color: var(--tx2); padding-left: 1.2em; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--brand); }
.legal .back { display: inline-block; margin-bottom: 32px; color: var(--tx3); text-decoration: none; }
.legal .back:hover { color: var(--brand); }

@media (max-width: 720px) {
    .hero { padding: 56px 20px 64px; }
    .section { padding: 60px 20px; }
}