/* PeerPause marketing landing — served at GET /landing.css */

:root {
    --accent: #8de969;
    --accent-soft: #bde4a7;
    --accent-deep: #2d6a4f;
    --accent-ink: #0f3d1a;
    --ink: #0e1410;
    --paper: #f5ecdc;
    --paper-2: #efe4d0;
    --tan: #e9dec5;
    --pink: #ffb3c1;
    --pink-soft: #ffd4dd;
    --cream: #fff9ec;
    --muted: rgba(14, 20, 16, 0.55);
    --line: rgba(14, 20, 16, 0.08);
    --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
    --body: "Inter", system-ui, -apple-system, sans-serif;
    --shell-pad: clamp(1.1rem, 4vw, 2rem);
    --shell-max: 70rem;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --shadow-btn: 0 6px 16px -4px rgba(14, 20, 16, 0.25);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--body);
    font-size: clamp(0.95rem, 1.3vw, 1rem);
    line-height: 1.5;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); letter-spacing: -0.035em; }
p { margin: 0; }
button { font-family: inherit; border: none; cursor: pointer; }

.shell {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--shell-pad);
}

/* —— Nav —— */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(245, 236, 220, 0.82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.85rem;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--display);
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: -0.03em;
    color: var(--ink);
}
.brand-ver {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--muted);
    background: rgba(14, 20, 16, 0.06);
    padding: 0.15rem 0.4rem;
    border-radius: 0.3rem;
    vertical-align: middle;
    letter-spacing: 0;
}
.brand-mark {
    width: 2rem;
    height: 2rem;
    border-radius: 0.55rem;
    background: linear-gradient(140deg, var(--ink), #1a241c);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    box-shadow: 0 4px 10px -2px rgba(14, 20, 16, 0.3);
}
.nav-right {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
}
.nav-link {
    display: none;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--ink);
    padding: 0.45rem 0.1rem;
}
.nav-link::before {
    content: "💬";
    font-size: 0.85rem;
}
@media (min-width: 620px) {
    .nav-link { display: inline-flex; }
}

/* —— Buttons —— */
.apple-glyph { flex-shrink: 0; }
.btn-appstore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--ink);
    color: #fff;
    font-weight: 700;
    border-radius: 0.85rem;
    text-decoration: none;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
    white-space: nowrap;
    box-shadow: var(--shadow-btn);
}
.btn-appstore:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -4px rgba(14, 20, 16, 0.35);
}
.btn-appstore-sm {
    padding: 0.5rem 0.95rem;
    font-size: 0.8rem;
    line-height: 1;
}
.btn-appstore-lg {
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
    line-height: 1;
    border-radius: 1rem;
}
.btn-appstore-disabled { opacity: 0.55; cursor: default; pointer-events: none; }
.btn-soft {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 1rem 1.35rem;
    background: rgba(14, 20, 16, 0.06);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 1rem;
    transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn-soft:hover { background: rgba(14, 20, 16, 0.1); transform: translateY(-1px); }
.dot-green {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(141, 233, 105, 0.25);
    animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(141, 233, 105, 0.25); }
    50% { box-shadow: 0 0 0 7px rgba(141, 233, 105, 0); }
}

/* —— Highlights —— */
.hl {
    display: inline-block;
    padding: 0.02em 0.15em;
    border-radius: 0.15em;
    font-family: var(--display);
    font-weight: 900;
    letter-spacing: -0.035em;
}
.hl-tan { background: var(--tan); color: var(--ink); }
.hl-pink { background: var(--pink); color: var(--ink); }
.hl-green { background: var(--accent); color: var(--accent-ink); }

/* —— Shared type —— */
.section-title {
    font-family: var(--display);
    font-size: clamp(2rem, 6vw, 3.75rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ink);
    text-align: center;
    margin: 0 auto;
    max-width: 18ch;
}

/* —— Hero —— */
.hero {
    padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
}
.hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.25rem);
}
.hero-title {
    font-family: var(--display);
    font-size: clamp(2.75rem, 10vw, 6.25rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.045em;
    color: var(--ink);
    max-width: 16ch;
    margin: 0;
}
.hero-ctas {
    display: inline-flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}
.hero-phone {
    position: relative;
    width: min(22rem, 100%);
    margin-top: 0.5rem;
}
.phone {
    position: relative;
    background: var(--ink);
    border-radius: 2.4rem;
    padding: 0.5rem;
    aspect-ratio: 9 / 19;
    box-shadow:
        0 0 0 1.5px rgba(255,255,255,0.04) inset,
        0 30px 60px -18px rgba(14, 20, 16, 0.35),
        0 14px 30px -8px rgba(14, 20, 16, 0.25);
}
.phone-notch {
    position: absolute;
    top: 0.95rem;
    left: 50%;
    transform: translateX(-50%);
    width: 5.75rem;
    height: 1.4rem;
    background: #000;
    border-radius: 9999px;
    z-index: 3;
}
.phone-screen {
    position: relative;
    height: 100%;
    border-radius: 1.95rem;
    background: linear-gradient(170deg, var(--cream) 0%, var(--accent-soft) 100%);
    padding: 2.85rem 0.85rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: hidden;
    text-align: left;
}
.phone-status {
    position: absolute;
    top: 0.85rem;
    left: 1rem;
    right: 1rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--ink);
    z-index: 4;
}
.phone-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(14, 20, 16, 0.1);
}
.phone-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--accent);
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 0.78rem;
    color: var(--accent-ink);
}
.phone-header-text strong {
    font-family: var(--display);
    font-size: 0.82rem;
    display: block;
    color: var(--ink);
}
.phone-header-text span {
    font-size: 0.62rem;
    color: var(--accent-deep);
    font-weight: 700;
}
.phone-bubble {
    max-width: 82%;
    padding: 0.5rem 0.75rem;
    font-size: 0.76rem;
    line-height: 1.3;
    border-radius: 1.1rem;
    font-weight: 500;
}
.phone-bubble--in {
    align-self: flex-start;
    background: #fff;
    color: var(--ink);
    border-bottom-left-radius: 0.3rem;
    box-shadow: 0 2px 6px rgba(14, 20, 16, 0.06);
}
.phone-bubble--out {
    align-self: flex-end;
    background: var(--ink);
    color: var(--accent);
    border-bottom-right-radius: 0.3rem;
    font-weight: 700;
}
.phone-card {
    background: #fff;
    border-radius: 0.9rem;
    padding: 0.7rem;
    box-shadow: 0 4px 10px rgba(14, 20, 16, 0.06);
    border: 1px solid rgba(14, 20, 16, 0.06);
}
.phone-card-row {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    margin-bottom: 0.55rem;
}
.phone-card-icon {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.5rem;
    display: grid;
    place-items: center;
    background: rgba(141, 233, 105, 0.28);
    font-size: 0.9rem;
}
.phone-card-row strong {
    display: block;
    font-family: var(--display);
    font-size: 0.76rem;
    color: var(--ink);
}
.phone-card-row span {
    font-size: 0.64rem;
    color: var(--muted);
    font-weight: 600;
}
.phone-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
}
.phone-btn {
    padding: 0.5rem;
    border-radius: 0.5rem;
    font-family: var(--display);
    font-size: 0.72rem;
    font-weight: 800;
}
.phone-btn--deny { background: var(--pink-soft); color: #b33a4f; }
.phone-btn--approve { background: var(--accent); color: var(--accent-ink); }
.hero-psst {
    margin-top: 0.25rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--muted);
    letter-spacing: -0.01em;
}

/* —— Features icon grid —— */
.features {
    padding-block: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--line);
}
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 4vw, 3rem) 1rem;
    text-align: center;
}
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } }
.feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    transition: transform 0.25s var(--ease);
}
.feature:hover { transform: translateY(-3px); }
.feature-ico {
    width: 2.35rem;
    height: 2.35rem;
    color: var(--ink);
}
.feature h3 {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1rem, 2vw, 1.1rem);
    color: var(--ink);
    line-height: 1.15;
}

/* —— How —— */
.how {
    padding-block: clamp(4rem, 8vw, 6rem);
    background: var(--paper-2);
    border-block: 1px solid var(--line);
}
.steps {
    margin-top: clamp(2rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.step {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    padding: clamp(1.5rem, 2.5vw, 1.9rem);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.step:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -12px rgba(14, 20, 16, 0.12);
}
.step-num {
    width: 2.1rem;
    height: 2.1rem;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 50%;
    font-family: var(--display);
    font-weight: 900;
    font-size: 0.95rem;
    display: grid;
    place-items: center;
    margin-bottom: 0.3rem;
}
.step h3 {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(1.15rem, 2.5vw, 1.35rem);
    color: var(--ink);
}
.step p {
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--muted);
}

/* —— Stats —— */
.stats {
    padding-block: clamp(4rem, 8vw, 6.5rem);
    text-align: center;
}
.stats-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.stats-label {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--muted);
    letter-spacing: -0.01em;
}
.stats-big {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    margin-block: 0.5rem 0.25rem;
}
.mega-number {
    font-family: var(--display);
    font-size: clamp(5.5rem, 22vw, 15rem);
    font-weight: 900;
    line-height: 0.88;
    letter-spacing: -0.07em;
    color: var(--ink);
}
.mega-unit {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.75rem, 5vw, 3.5rem);
    color: var(--ink);
    letter-spacing: -0.03em;
}
.stats-sub {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.1rem, 2.2vw, 1.45rem);
    color: var(--ink);
}
.stats-flip {
    margin-top: 1.5rem;
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
}

/* —— Love / testimonials —— */
.love {
    padding-block: clamp(4rem, 8vw, 6rem);
    background: var(--paper-2);
    border-block: 1px solid var(--line);
}
.love-grid {
    margin-top: clamp(2rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) { .love-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .love-grid { grid-template-columns: repeat(4, 1fr); } }
.love-card {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.love-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -12px rgba(14, 20, 16, 0.12);
}
.love-card p {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--ink);
    line-height: 1.35;
    flex: 1;
}
.love-who {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--line);
}
.love-av {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-weight: 900;
    color: var(--ink);
    font-size: 0.85rem;
}
.love-who strong {
    display: block;
    font-family: var(--display);
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--ink);
}
.love-who span {
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 600;
}

/* —— CTA —— */
.cta {
    padding-block: clamp(4.5rem, 9vw, 7rem);
    text-align: center;
}
.cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}
.cta-actions .btn-appstore { padding: 1.1rem 1.65rem; font-size: 1rem; }
.cta-micro {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--muted);
}

/* —— Watermark —— */
.watermark {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-top: 1rem;
    padding-bottom: 0;
    overflow: hidden;
    line-height: 0.85;
}
.watermark span {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(4rem, 20vw, 14rem);
    letter-spacing: -0.065em;
    color: rgba(14, 20, 16, 0.08);
    white-space: nowrap;
    user-select: none;
    line-height: 0.85;
    padding-bottom: 0;
    transform: translateY(18%);
}

/* —— Footer —— */
.footer {
    background: var(--ink);
    color: rgba(255, 249, 236, 0.82);
    padding-block: clamp(3rem, 6vw, 4rem) clamp(2rem, 4vw, 2.5rem);
}
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--display);
    font-weight: 900;
    color: var(--accent);
    font-size: 1.1rem;
    margin-bottom: clamp(2rem, 4vw, 2.5rem);
}
.footer-brand .brand-mark { background: rgba(141, 233, 105, 0.14); color: var(--accent); }
.footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-col h4 {
    font-family: var(--display);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin-bottom: 0.75rem;
    font-weight: 900;
}
.footer-col a, .footer-col span {
    display: block;
    margin-bottom: 0.4rem;
    color: rgba(255, 249, 236, 0.75);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
    margin-top: clamp(2rem, 4vw, 2.5rem);
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 249, 236, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-family: var(--display);
    font-size: 0.85rem;
    color: rgba(255, 249, 236, 0.5);
    font-weight: 600;
}
@media (min-width: 640px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

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

/* —— Legal pages (privacy, terms, etc.) —— */
.legal {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
    background: var(--paper);
}
.legal-inner {
    max-width: 44rem;
}
.legal-eyebrow {
    font-family: var(--display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.75rem;
    color: var(--accent-deep);
    margin-bottom: 0.75rem;
}
.legal-title {
    font-size: clamp(2.25rem, 6vw, 3.5rem);
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: 0.5rem;
}
.legal-meta {
    font-family: var(--display);
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 1.75rem;
}
.legal-placeholder {
    background: var(--cream);
    border: 1px dashed rgba(14, 20, 16, 0.18);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    margin-bottom: 2rem;
    font-size: 0.95rem;
    color: var(--ink);
}
.legal-placeholder p { margin: 0; }
.legal-body h2 {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 800;
    margin-top: 2rem;
    margin-bottom: 0.6rem;
}
.legal-body p,
.legal-body li {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
}
.legal-body p { margin-bottom: 0.85rem; }
.legal-body ul {
    margin: 0 0 1rem 0;
    padding-left: 1.25rem;
}
.legal-body li { margin-bottom: 0.4rem; }
.legal-body a {
    color: var(--accent-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.legal-body strong { font-weight: 700; }
.legal-back {
    margin-top: 2.5rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.95rem;
}
.legal-back a {
    color: var(--accent-deep);
    text-decoration: underline;
    text-underline-offset: 4px;
}