/* ============================================================
   Contact page — consistent with the landing/about design system.
   Tokens (--np-*) live in main.css; brand fonts loaded in public_base.
   ============================================================ */
.ct-page { font-family: var(--np-font-body); color: var(--np-ink); }
.ct-page h1, .ct-page h2 {
    font-family: var(--np-font-display); color: var(--np-navy);
    font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; margin: 0;
}
.ct-page p { margin: 0; line-height: 1.6; }
.ct-page a { text-decoration: none; }
.ct-container { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }
.ct-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--np-green-strong);
}
.ct-eyebrow i { font-size: 0.95rem; }

/* ---- hero (centered, dot-grid) ---- */
.ct-hero { position: relative; overflow: hidden; padding: 3.5rem 0 1rem; text-align: center; }
.ct-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(680px 360px at 86% -12%, rgba(16, 185, 129, 0.12), transparent 60%),
        radial-gradient(560px 440px at -2% 60%, rgba(37, 99, 235, 0.10), transparent 62%);
}
.ct-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgba(15, 23, 42, 0.06) 1px, transparent 1.4px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}
.ct-hero > .ct-container { position: relative; z-index: 1; }
.ct-back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--np-muted); font-size: 0.88rem; font-weight: 500; margin-bottom: 1.6rem; transition: color 0.15s ease; }
.ct-back:hover { color: var(--np-navy); }
.ct-hero .ct-eyebrow {
    background: #fff; border: 1px solid var(--np-line); border-radius: 999px;
    padding: 0.42rem 0.95rem; box-shadow: var(--np-shadow-sm);
}
.ct-title { font-size: clamp(2rem, 4.6vw, 3rem); letter-spacing: -0.035em; margin: 1.1rem auto 0; }
.ct-hero .ct-lead { color: var(--np-muted); font-size: 1.15rem; line-height: 1.6; max-width: 52ch; margin: 1.2rem auto 0; }

/* ---- support card ---- */
.ct-card {
    position: relative; overflow: hidden; text-align: center;
    background: #fff; border: 1px solid var(--np-line); border-radius: var(--np-radius-lg);
    box-shadow: var(--np-shadow); max-width: 520px; margin: 2.6rem auto 0; padding: 2.5rem 2rem 2rem;
}
.ct-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--np-green), var(--np-blue)); }
.ct-card::after { content: ""; position: absolute; top: -40px; right: -40px; width: 220px; height: 220px; pointer-events: none; background: radial-gradient(circle, rgba(16, 185, 129, 0.14), transparent 65%); }
.ct-card > * { position: relative; }
.ct-card-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--np-green-soft); color: var(--np-green-strong); font-size: 1.5rem; }
.ct-card-title { font-size: 1.3rem; margin-top: 1rem; }
.ct-card .ct-card-desc { color: var(--np-muted); font-size: 0.98rem; max-width: 34ch; margin: 0.6rem auto 0; }
.ct-mail { margin-top: 1.5rem; }
.ct-mail .cta-button-icon { background: rgba(52, 211, 153, 0.18); color: #34d399; }
.ct-card-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.4rem; margin-top: 1.4rem; }
.ct-card-meta span { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--np-muted); font-size: 0.82rem; font-weight: 500; }
.ct-card-meta i { color: var(--np-green-strong); font-size: 0.95rem; }

/* ---- tip ---- */
.ct-hero .ct-tip { color: var(--np-faint); font-size: 0.85rem; max-width: 46ch; margin: 1.4rem auto 0; text-align: center; }

/* ---- helper cards ---- */
.ct-help { padding: 2.5rem 0 4.5rem; }
.ct-help-label { text-align: center; color: var(--np-faint); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.6rem; }
.ct-help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; max-width: 960px; margin: 0 auto; }
.ct-help-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; background: #fff; border: 1px solid var(--np-line); border-radius: var(--np-radius-lg); padding: 1.6rem; transition: transform 0.18s var(--np-ease), box-shadow 0.18s var(--np-ease), border-color 0.18s var(--np-ease); }
.ct-help-card:hover { transform: translateY(-4px); box-shadow: var(--np-shadow); border-color: var(--np-line-strong); }
.ct-help-card--blue { background: linear-gradient(105deg, rgba(37, 99, 235, 0.07), #fff 55%); }
.ct-help-card--green { background: linear-gradient(105deg, rgba(16, 185, 129, 0.07), #fff 55%); }
.ct-help-card--indigo { background: linear-gradient(105deg, rgba(129, 140, 248, 0.09), #fff 55%); }
.ct-help-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; font-size: 1.15rem; background: var(--np-green-soft); color: var(--np-green-strong); }
.ct-help-ico--blue { background: rgba(37, 99, 235, 0.10); color: #2563eb; }
.ct-help-ico--indigo { background: rgba(129, 140, 248, 0.14); color: #6366f1; }
.ct-help-card strong { color: var(--np-navy); font-weight: 700; font-size: 1.02rem; margin-top: 0.2rem; }
.ct-help-desc { color: var(--np-muted); font-size: 0.92rem; line-height: 1.55; }
.ct-help-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 600; margin-top: auto; padding-top: 0.4rem; color: var(--np-green-strong); transition: gap 0.15s ease; }
.ct-help-link--blue { color: #2563eb; }
.ct-help-link--indigo { color: #6366f1; }
.ct-help-card:hover .ct-help-link { gap: 0.6rem; }

/* ---- responsive ---- */
@media (max-width: 860px) {
    .ct-help-grid { grid-template-columns: 1fr; }
}