/*
 * Wazigo public website — the coming-soon page and the four legal documents.
 *
 * Deliberately standalone. These pages are server-rendered Blade with no React,
 * no Redux and no auth, so pulling in the application's stylesheet bundle would
 * ship an inbox's worth of CSS to read a privacy policy. The tokens below are
 * the SAME values as resources/js/styles/variables.css — if the brand moves,
 * both move together.
 */

:root {
    /* Trust blue. Never green: green is reserved for real WhatsApp state in the
       app, and Meta's brand guidelines don't let a third-party tool dress
       itself as WhatsApp. */
    --site-primary: #2563eb;
    --site-primary-hover: #1d4ed8;
    --site-primary-active: #1e40af;
    --site-primary-soft: #eff4ff;

    --site-navy: #0f1b33;
    --site-navy-soft: #1b2a47;

    --site-ink: #10192b;
    --site-ink-muted: #4d5871;
    --site-ink-faint: #6b7690;

    --site-bg: #ffffff;
    --site-bg-alt: #f6f8fc;
    --site-border: #e2e7f0;

    --site-radius: 12px;
    --site-radius-lg: 20px;

    /* 4px rhythm. */
    --site-space-1: 4px;
    --site-space-2: 8px;
    --site-space-3: 12px;
    --site-space-4: 16px;
    --site-space-6: 24px;
    --site-space-8: 32px;
    --site-space-12: 48px;
    --site-space-16: 64px;
    --site-space-24: 96px;

    --site-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --site-font-head: 'Plus Jakarta Sans', var(--site-font-body);

    --site-shadow: 0 1px 2px rgba(15, 27, 51, 0.04), 0 8px 24px rgba(15, 27, 51, 0.06);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Anchored headings in the legal documents would otherwise land underneath the
   sticky header. */
:target { scroll-margin-top: 96px; }

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

body {
    margin: 0;
    background: var(--site-bg);
    color: var(--site-ink);
    font-family: var(--site-font-body);
    /* 17px, not 16: the audience is phone-first, non-technical and often on a
       cheap Android screen, and the legal pages are long. */
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--site-font-head);
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0;
    /* Keeps a two-word orphan off the last line of a short heading. Progressive:
       browsers without support just wrap normally. */
    text-wrap: balance;
}

p, li { text-wrap: pretty; }

a { color: var(--site-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--site-primary-hover); }

/* A visible focus ring on everything focusable, in both the light body and the
   navy footer. Never removed. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--site-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* URLs, template tokens and email addresses inside prose must be able to reflow
   on a 320px screen without pushing the page sideways. `anywhere`, not
   break-all, so ordinary words still wrap on spaces. */
code, .site-doc a { overflow-wrap: anywhere; }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    background: var(--site-primary-soft);
    color: var(--site-primary-active);
    padding: 2px 6px;
    border-radius: 5px;
}

/* ---------------------------------------------------------------- skip link */

.site-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
}
.site-skip:focus {
    left: var(--site-space-4);
    top: var(--site-space-4);
    background: var(--site-navy);
    color: #fff;
    padding: var(--site-space-3) var(--site-space-4);
    border-radius: var(--site-radius);
}

/* -------------------------------------------------------------------- shell */

.site-shell { display: flex; flex-direction: column; min-height: 100dvh; }
.site-main { flex: 1; }

.site-wrap {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--site-space-6);
}
@media (min-width: 768px) {
    .site-wrap { padding: 0 var(--site-space-8); }
}

/* ------------------------------------------------------------------- header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--site-border);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--site-space-4);
    min-height: 68px;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--site-space-3);
    font-family: var(--site-font-head);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.02em;
    color: var(--site-navy);
    text-decoration: none;
    /* 44px tall tap target even though the text is shorter. */
    padding: var(--site-space-2) 0;
}
.site-logo:hover { color: var(--site-navy); }
.site-logo__mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--site-primary);
    color: #fff;
    flex: none;
}
.site-logo__mark svg { width: 19px; height: 19px; display: block; }

/* ----------------------------------------------------------------- buttons  */

.site-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--site-space-2);
    min-height: 52px;
    padding: 0 var(--site-space-8);
    border: 1px solid transparent;
    border-radius: var(--site-radius);
    font-family: var(--site-font-head);
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.site-btn--primary { background: var(--site-primary); color: #fff; }
.site-btn--primary:hover { background: var(--site-primary-hover); color: #fff; }
.site-btn--primary:active { background: var(--site-primary-active); }
.site-btn--ghost { border-color: var(--site-border); color: var(--site-ink); background: #fff; }
.site-btn--ghost:hover { border-color: var(--site-primary); color: var(--site-primary); }

/* --------------------------------------------------------------------- hero */

.site-hero { padding: var(--site-space-16) 0 var(--site-space-12); }
@media (min-width: 768px) {
    .site-hero { padding: var(--site-space-24) 0 var(--site-space-16); }
}

.site-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--site-space-2);
    padding: 6px var(--site-space-3);
    border: 1px solid var(--site-border);
    border-radius: 999px;
    background: var(--site-primary-soft);
    color: var(--site-primary-active);
    font-size: 14px;
    font-weight: 600;
}

.site-hero h1 {
    margin: var(--site-space-6) 0 0;
    font-size: clamp(34px, 7vw, 60px);
    font-weight: 800;
    max-width: 16ch;
}
.site-hero__sub {
    margin: var(--site-space-6) 0 0;
    /* 60-70 characters is the readable measure; ch units hold it at every size. */
    max-width: 62ch;
    font-size: clamp(17px, 2.2vw, 20px);
    color: var(--site-ink-muted);
}
.site-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--site-space-3);
    margin-top: var(--site-space-8);
}

/* ------------------------------------------------------------------- points */

.site-points {
    background: var(--site-bg-alt);
    border-top: 1px solid var(--site-border);
    border-bottom: 1px solid var(--site-border);
    padding: var(--site-space-16) 0;
}
.site-points__grid {
    display: grid;
    gap: var(--site-space-6);
    margin-top: var(--site-space-8);
}
@media (min-width: 720px) {
    .site-points__grid { grid-template-columns: repeat(3, 1fr); }
}

.site-card {
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-lg);
    padding: var(--site-space-6);
    box-shadow: var(--site-shadow);
}
.site-card__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--site-primary-soft);
    color: var(--site-primary);
    margin-bottom: var(--site-space-4);
}
.site-card__icon svg { width: 22px; height: 22px; display: block; }
.site-card h3 { font-size: 19px; font-weight: 700; }
.site-card p { margin: var(--site-space-2) 0 0; color: var(--site-ink-muted); font-size: 16px; }

.site-section__title { font-size: clamp(26px, 4vw, 34px); font-weight: 800; max-width: 22ch; }
.site-section__lead { margin: var(--site-space-3) 0 0; max-width: 60ch; color: var(--site-ink-muted); }

/* ------------------------------------------------------------------ contact */

.site-contact { padding: var(--site-space-16) 0; }
.site-contact__box {
    background: var(--site-navy);
    color: #fff;
    border-radius: var(--site-radius-lg);
    padding: var(--site-space-12) var(--site-space-6);
    text-align: center;
}
@media (min-width: 768px) {
    .site-contact__box { padding: var(--site-space-16); }
}
.site-contact__box h2 { font-size: clamp(24px, 3.5vw, 32px); font-weight: 800; }
.site-contact__box p {
    margin: var(--site-space-4) auto 0;
    max-width: 52ch;
    /* #c7d0e2 on #0f1b33 is 9.4:1 — comfortably past AA for body text. */
    color: #c7d0e2;
}
.site-contact__box .site-btn { margin-top: var(--site-space-8); }
.site-contact__box .site-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}
.site-contact__box .site-btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.08); }

/* ------------------------------------------------------------- legal pages  */

.site-doc { padding: var(--site-space-12) 0 var(--site-space-16); }

.site-doc__head { max-width: 68ch; }
.site-doc__head h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 800; }
.site-doc__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--site-space-2) var(--site-space-6);
    margin: var(--site-space-4) 0 0;
    padding: 0;
    list-style: none;
    color: var(--site-ink-faint);
    font-size: 15px;
}
.site-doc__intro { margin: var(--site-space-6) 0 0; font-size: 18px; color: var(--site-ink-muted); }

.site-doc__layout { display: block; margin-top: var(--site-space-12); }

/* On a wide screen the contents list becomes a sticky rail; below that it is a
   plain collapsible block above the text, which is the right shape on a phone. */
@media (min-width: 1024px) {
    .site-doc__layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: var(--site-space-16);
        align-items: start;
    }
    .site-toc {
        position: sticky;
        top: 96px;
        order: 2;
        max-height: calc(100dvh - 130px);
        overflow-y: auto;
    }
    .site-doc__body { order: 1; }
}

.site-toc {
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    padding: var(--site-space-4) var(--site-space-6);
    background: var(--site-bg-alt);
    margin-bottom: var(--site-space-8);
}
.site-toc > summary {
    font-family: var(--site-font-head);
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--site-ink-faint);
    cursor: pointer;
    /* 44px tap target for the phone disclosure. */
    padding: var(--site-space-2) 0;
}
.site-toc ol {
    margin: var(--site-space-3) 0 0;
    padding: 0 0 0 var(--site-space-4);
    font-size: 15px;
    line-height: 1.5;
}
.site-toc li { margin-bottom: var(--site-space-3); color: var(--site-ink-faint); }
.site-toc a { color: var(--site-ink-muted); text-decoration: none; }
.site-toc a:hover { color: var(--site-primary); text-decoration: underline; }

.site-doc__body { max-width: 72ch; }
.site-doc__body h2 {
    margin: var(--site-space-12) 0 var(--site-space-4);
    padding-top: var(--site-space-4);
    border-top: 1px solid var(--site-border);
    font-size: clamp(22px, 3vw, 27px);
    font-weight: 700;
}
.site-doc__body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.site-doc__body h3 {
    margin: var(--site-space-8) 0 var(--site-space-3);
    font-size: 19px;
    font-weight: 700;
}
.site-doc__body p { margin: 0 0 var(--site-space-4); }
.site-doc__body ul, .site-doc__body ol { margin: 0 0 var(--site-space-4); padding-left: var(--site-space-6); }
.site-doc__body li { margin-bottom: var(--site-space-2); }
.site-doc__body strong { font-weight: 600; color: var(--site-ink); }

.site-doc__body dl { margin: 0 0 var(--site-space-4); }
.site-doc__body dt { font-weight: 600; margin-top: var(--site-space-3); }
.site-doc__body dd { margin: var(--site-space-1) 0 0; color: var(--site-ink-muted); }

.site-note {
    margin: 0 0 var(--site-space-6);
    padding: var(--site-space-4) var(--site-space-6);
    border-left: 3px solid var(--site-primary);
    background: var(--site-primary-soft);
    border-radius: 0 var(--site-radius) var(--site-radius) 0;
}
.site-note p:last-child { margin-bottom: 0; }

.site-table-scroll { overflow-x: auto; margin: 0 0 var(--site-space-6); }
.site-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 15px;
}
.site-table th, .site-table td {
    text-align: left;
    vertical-align: top;
    padding: var(--site-space-3);
    border-bottom: 1px solid var(--site-border);
}
.site-table th {
    font-family: var(--site-font-head);
    font-weight: 700;
    background: var(--site-bg-alt);
}

.site-steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 var(--site-space-6); }
.site-steps > li {
    counter-increment: step;
    position: relative;
    padding-left: 44px;
    margin-bottom: var(--site-space-6);
}
.site-steps > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--site-primary);
    color: #fff;
    font-family: var(--site-font-head);
    font-weight: 700;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------- footer */

.site-footer {
    background: var(--site-navy);
    color: #c7d0e2;
    padding: var(--site-space-16) 0 var(--site-space-8);
    font-size: 15px;
}
.site-footer a { color: #c7d0e2; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .site-logo { color: #fff; }

.site-footer__grid { display: grid; gap: var(--site-space-8); }
@media (min-width: 768px) {
    .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--site-space-12); }
}
.site-footer__about { max-width: 42ch; margin: var(--site-space-4) 0 0; }
.site-footer h2 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8595b3;
    margin-bottom: var(--site-space-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--site-space-1); }
/* Footer links are the ones Meta's app review has to be able to reach on a
   phone, so they get the same 44px target as anything else. */
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }

.site-footer__legal {
    margin-top: var(--site-space-12);
    padding-top: var(--site-space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #8595b3;
    font-size: 14px;
}
.site-footer__legal p { margin: 0 0 var(--site-space-2); }

/* -------------------------------------------------------------------- 404   */

.site-404 { padding: var(--site-space-24) 0; text-align: center; }
.site-404 h1 { font-size: clamp(28px, 5vw, 40px); font-weight: 800; }
.site-404 p { margin: var(--site-space-4) auto var(--site-space-8); max-width: 46ch; color: var(--site-ink-muted); }