/* ===========================================================================
   landing.css - public (unauthorized) site: nav, footer, section primitives
   and the illustration primitives shared by Home and Features.
   Loaded after app.css, so the .nd-l*-scoped overrides of the nav, the footer
   and the shared info-page layout win without editing app.css itself.
   Everything is scoped to .nd-lnav / .nd-lmain / .nd-lfoot (MainLayout only),
   so the authorized layouts keep exactly the appearance they have now.
   =========================================================================== */

.nd-lmain{
    /* landing sections carry their own top rhythm */
    padding-top: 0;

    --l-ink: #111214;
    --l-body: rgba(17,18,20,.66);
    --l-dim: rgba(17,18,20,.55);
    --l-hair: rgba(17,18,20,.09);
    --l-dark: #0D1020;
    --l-sec: clamp(56px, 8vw, 96px);
}

/* ---- focus ------------------------------------------------------------- */
.nd-lnav a:focus-visible,
.nd-lnav button:focus-visible,
.nd-lmain a:focus-visible,
.nd-lmain button:focus-visible,
.nd-lmain summary:focus-visible,
.nd-lmain input:focus-visible,
.nd-lmain select:focus-visible,
.nd-lmain textarea:focus-visible,
.nd-lfoot a:focus-visible,
.nd-lfoot button:focus-visible{
    outline: 2px solid var(--p1);
    outline-offset: 3px;
}
.nd-lfoot a:focus-visible,
.nd-lfoot button:focus-visible{ outline-color: #A9B2FF; }

/* ===== Nav =============================================================== */
.nd-lnav .nd-nav-inner{ gap: 16px; }
.nd-lnav .nd-menu-links{ gap: 20px; }
.nd-lnav .nd-link{ font-size: 0.875rem; }
.nd-lnav .nd-link-cta{
    height: 40px;
    padding: 0 18px;
    font-size: 0.8125rem;
    letter-spacing: 0;
}
/* Log in / Join free open a modal, so they are real buttons wearing .nd-link */
.nd-lnav button.nd-link{
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
}
.nd-lnav button.nd-link-cta{
    font-size: 0.8125rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--p1), var(--p2));
}
.nd-lnav .nd-burger span{ transform-origin: center; }
.nd-lnav .nd-burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nd-lnav .nd-burger.is-open span:nth-child(2){ opacity: 0; }
.nd-lnav .nd-burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* six links plus two actions stop fitting comfortably well before the 760px
   breakpoint app.css uses, so the burger arrives earlier on the public site */
@media (max-width: 900px){
    .nd-lnav .nd-burger{ display: block; }
    .nd-lnav .nd-menu-links{
        position: fixed;
        right: 14px;
        top: 72px;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        background: rgba(255,255,255,.97);
        border: 1px solid rgba(17,18,20,.08);
        border-radius: 20px;
        padding: 12px;
        box-shadow: 0 20px 60px rgba(17,18,20,.18);
        display: none;
        min-width: 244px;
        backdrop-filter: blur(14px);
        z-index: 200;
    }
    .nd-lnav .nd-menu-links.is-open{ display: flex; }
    .nd-lnav .nd-menu-spacer{ display: none; }
    .nd-lnav .nd-menu-links .nd-link{
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 14px;
        border-radius: 12px;
        font-size: 0.9375rem;
    }
    .nd-lnav .nd-menu-links .nd-link::after{ display: none; }
    .nd-lnav .nd-menu-links .nd-link-cta{
        height: 46px;
        justify-content: center;
        border-radius: 14px;
        margin-top: 6px;
    }
    .nd-lnav .nd-menu-links .nd-nav-signout{
        height: 46px;
        justify-content: center;
        border-radius: 14px;
        width: 100%;
    }
}

/* ===== Footer ============================================================ */
.nd-lfoot .nd-footer-tagline{ font-size: 0.875rem; max-width: 300px; }
.nd-lfoot .nd-footer-title{
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.875rem;
    font-weight: 700;
}
.nd-lfoot .nd-footer-link{ font-size: 0.875rem; color: rgba(255,255,255,.62); }
.nd-lfoot .nd-footer-mail{
    display: inline-block;
    margin-top: 14px;
    color: rgba(255,255,255,.80);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.26);
}
.nd-lfoot .nd-footer-mail:hover{ color: #fff; }
.nd-lfoot .nd-footer-copy{ font-size: 0.8125rem; color: rgba(255,255,255,.48); }
.nd-lfoot .nd-footer-copy-muted{ color: rgba(255,255,255,.38); }
.nd-lfoot .nd-pay-pill{ color: rgba(255,255,255,.68); }

/* ===== Type ============================================================== */
.nd-l-h1{
    margin: 0;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.02em;
    color: var(--l-ink);
}
.nd-l-h2{
    margin: 0;
    font-size: clamp(1.75rem, 3.6vw, 2.25rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--l-ink);
}
.nd-l-h3{
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--l-ink);
}
.nd-l-h4{
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--l-ink);
}
.nd-l-lede{
    margin: 0;
    max-width: 62ch;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--l-body);
}
.nd-l-p{
    margin: 0;
    max-width: 62ch;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--l-body);
}
.nd-l-p + .nd-l-p{ margin-top: 14px; }
.nd-l-p strong,
.nd-l-lede strong{ color: var(--l-ink); font-weight: 700; }
.nd-l-small{
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--l-dim);
}
.nd-l-kicker{
    display: block;
    margin: 0 0 12px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--p1);
}
.nd-lmain a{ color: inherit; }
.nd-l-p a,
.nd-l-small a,
.nd-l-lede a,
.nd-lmain .nd-l-link{
    color: var(--p1);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(91,108,255,.35);
}
.nd-l-p a:hover,
.nd-l-small a:hover,
.nd-l-lede a:hover,
.nd-lmain .nd-l-link:hover{ border-bottom-color: var(--p1); }

/* screen-reader only text (icon-only table cells) */
.nd-sr{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ===== Sections ========================================================== */
.nd-l-sec{ padding: var(--l-sec) 0; }
.nd-l-sec--tight{ padding: calc(var(--l-sec) * .66) 0; }
.nd-l-band{
    padding: var(--l-sec) 0;
    background: linear-gradient(180deg, rgba(91,108,255,.055), rgba(255,91,200,.055));
    border-top: 1px solid var(--l-hair);
    border-bottom: 1px solid var(--l-hair);
}
.nd-l-head{ margin-bottom: clamp(28px, 4vw, 48px); }
.nd-l-head .nd-l-p,
.nd-l-head .nd-l-lede{ margin-top: 14px; }

/* ===== Buttons =========================================================== */
.nd-l-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 14px;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.nd-l-btn--primary{
    background: linear-gradient(135deg, var(--p1), var(--p2));
    color: #fff;
    box-shadow: 0 10px 28px rgba(91,108,255,.26);
}
.nd-l-btn--ghost{
    background: #fff;
    border-color: rgba(17,18,20,.14);
    color: var(--l-ink);
}
.nd-l-btn--onDark{
    background: #fff;
    color: #14162b;
}
@media (hover: hover){
    .nd-l-btn--primary:hover{ transform: translateY(-1px); box-shadow: 0 14px 34px rgba(91,108,255,.32); }
    .nd-l-btn--ghost:hover{ border-color: rgba(17,18,20,.30); }
    .nd-l-btn--onDark:hover{ transform: translateY(-1px); }
}
.nd-l-btn:active{ transform: scale(.99); }

/* text button: full 44px hit area, no box */
.nd-l-txtbtn{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--p1);
    cursor: pointer;
    text-decoration: none;
}
.nd-l-txtbtn:hover{ color: var(--p2); }
.nd-l-txtbtn--inline{
    min-height: 0;
    font-size: inherit;
    vertical-align: baseline;
}

.nd-l-arrow{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--p1);
    text-decoration: none;
}
.nd-l-arrow i{ font-size: 0.8125rem; transition: transform .18s ease; }
@media (hover: hover){
    .nd-l-arrow:hover i{ transform: translateX(3px); }
}

/* provider buttons reuse .nd-auth-social from app.css so they are identical to
   the ones inside the auth modal; only the row wrapper differs here */
.nd-l-providers{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
/* side by side while there is room for both, one per row below that */
.nd-l-providers .nd-auth-social{
    flex: 1 1 236px;
    width: auto;
    max-width: 340px;
}

/* ===== Quiet scroll reveals ============================================== */
/* armed by nd-landing.js only, and never under prefers-reduced-motion, so the
   page is fully visible with JS off */
.nd-reveal-on [data-reveal]{
    opacity: 0;
    transform: translateY(12px);
}
.nd-reveal-on [data-reveal].is-in{
    opacity: 1;
    transform: none;
    transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}

/* ===== Shared illustration: profile card ================================= */
.nd-pc{
    position: relative;
    width: var(--pc-w, 300px);
    aspect-ratio: 3 / 4;
    border-radius: 24px;
    overflow: hidden;
    background: #E7E9F3;
    box-shadow: 0 24px 60px rgba(17,18,20,.18);
}
.nd-pc img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nd-pc-shade{
    position: absolute;
    inset: auto 0 0;
    height: 55%;
    background: linear-gradient(to top, rgba(8,9,18,.85), rgba(8,9,18,.10) 62%, rgba(8,9,18,0));
}
.nd-pc-name{
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.nd-pc-bars{
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    gap: 4px;
}
.nd-pc-bars span{
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: rgba(255,255,255,.38);
}
.nd-pc-bars span:first-child{ background: #fff; }

/* ===== Shared illustration: match pill =================================== */
.nd-mp{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--p1), var(--p2));
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 16px 36px rgba(91,108,255,.34);
}
.nd-mp i{ font-size: 0.9375rem; }

/* ===== Shared illustration: chat mock ==================================== */
.nd-cm{
    width: 100%;
    max-width: 380px;
    border-radius: 24px;
    background: var(--surface);
    border: 1px solid var(--l-hair);
    box-shadow: 0 26px 70px rgba(17,18,20,.14);
    overflow: hidden;
}
.nd-cm-head{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--l-hair);
}
.nd-cm-ava{
    width: 36px;
    height: 36px;
    border-radius: 999px;
    object-fit: cover;
    background: #E7E9F3;
}
.nd-cm-who{ font-size: 0.9375rem; font-weight: 700; color: var(--l-ink); }
.nd-cm-body{
    display: grid;
    gap: 10px;
    padding: 16px;
}
.nd-cm-row{ position: relative; display: flex; }
.nd-cm-row--you{ justify-content: flex-end; }
.nd-cm-bub{
    max-width: 78%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 0.9375rem;
    line-height: 1.45;
    background: #F1F2F8;
    color: rgba(17,18,20,.82);
    border-bottom-left-radius: 6px;
}
.nd-cm-row--you .nd-cm-bub{
    background: linear-gradient(135deg, var(--p1), var(--p2));
    color: #fff;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 6px;
}
.nd-cm-typing{
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 0 16px;
    border-radius: 18px;
    border-bottom-left-radius: 6px;
    background: #F1F2F8;
}
.nd-cm-typing span{
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(17,18,20,.35);
}
.nd-cm-foot{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--l-hair);
}
.nd-cm-input{
    flex: 1;
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    background: #F1F2F8;
    font-size: 0.875rem;
    color: rgba(17,18,20,.42);
}
.nd-cm-send{
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--p1), var(--p2));
    color: #fff;
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* ===== Company plaque (About, Contact) =================================== */
.nd-l-company{
    display: grid;
    gap: 6px;
    padding: 24px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--l-hair);
    background: var(--surface);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--l-body);
    max-width: 520px;
}
.nd-l-company strong{ color: var(--l-ink); font-weight: 700; }

/* ===== FAQ accordions (Home, Contact) ==================================== */
.nd-l-faq{
    max-width: 760px;
    border-top: 1px solid var(--l-hair);
}
.nd-l-faq details{
    border-bottom: 1px solid var(--l-hair);
}
.nd-l-faq summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    min-height: 44px;
    list-style: none;
    cursor: pointer;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--l-ink);
}
.nd-l-faq summary::-webkit-details-marker{ display: none; }
.nd-l-faq summary::after{
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    border-right: 2px solid rgba(17,18,20,.42);
    border-bottom: 2px solid rgba(17,18,20,.42);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}
.nd-l-faq details[open] summary::after{ transform: rotate(225deg) translate(-2px, -2px); }
.nd-l-faq details > .nd-l-p{ padding: 0 0 22px; }

/* ===== Simple data table (Features, Pricing) ============================= */
.nd-l-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}
.nd-l-table th,
.nd-l-table td{
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--l-hair);
    color: var(--l-body);
}
.nd-l-table th{
    font-weight: 700;
    color: var(--l-ink);
}
.nd-l-table thead th{
    font-size: 0.875rem;
    color: var(--l-dim);
    font-weight: 700;
}
.nd-l-table tbody th{ font-weight: 600; color: var(--l-ink); }
.nd-l-table td i.fa-check{ color: #16A34A; }
.nd-l-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== Dark closing panel ================================================ */
.nd-l-cta{
    position: relative;
    overflow: hidden;
    padding: clamp(40px, 6vw, 64px);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(600px 300px at 12% 0%, rgba(91,108,255,.30), transparent 60%),
        radial-gradient(600px 300px at 88% 100%, rgba(255,91,200,.24), transparent 60%),
        var(--l-dark);
    color: #fff;
}
.nd-l-cta .nd-l-h2,
.nd-l-cta .nd-l-h3{ color: #fff; }
.nd-l-cta .nd-l-p{ color: rgba(255,255,255,.72); margin-top: 14px; }
.nd-l-cta .nd-l-small{ color: rgba(255,255,255,.55); }
.nd-l-cta .nd-l-txtbtn{ color: #fff; }
.nd-l-cta-actions{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 28px;
}
.nd-l-cta-actions .nd-l-providers{
    flex: 1 1 280px;
    min-width: 0;
    max-width: 700px;
}

/* ===========================================================================
   Shared info-page layout (legal pages, 404): restyled, plus the two-column
   document layout with the sticky "On this page" list.
   =========================================================================== */
.nd-lmain .nd-info-page{ padding: 48px 0 72px; }
.nd-lmain .nd-info-hero{ text-align: left; padding-bottom: 28px; }
.nd-lmain .nd-info-hero h1{
    font-size: clamp(2rem, 4.4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--l-ink);
}
.nd-lmain .nd-info-hero p{
    margin: 14px 0 0;
    max-width: 62ch;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--l-body);
}
.nd-lmain .nd-info-kicker{
    margin-bottom: 10px;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--p1);
}
.nd-lmain .nd-info-updated{
    text-align: left;
    font-size: 0.8125rem;
    color: var(--l-dim);
    margin: 0 0 28px;
}

.nd-legal{
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}
.nd-legal-toc{
    position: sticky;
    top: 88px;
    border-left: 2px solid var(--l-hair);
    padding-left: 16px;
}
.nd-legal-toc-title{
    margin: 0 0 10px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--l-ink);
}
.nd-legal-toc ol{
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 2px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}
.nd-legal-toc a{
    display: block;
    padding: 5px 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--l-dim);
    text-decoration: none;
}
.nd-legal-toc a:hover{ color: var(--p1); }
/* the disclosure is the mobile control only; on desktop the list is always up */
.nd-legal-toggle{ display: none; }

.nd-lmain .nd-info-body{
    max-width: 68ch;
    margin: 0;
}
.nd-lmain .nd-info-body > p{
    margin: 0 0 14px;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--l-body);
}
.nd-lmain .nd-info-section{
    margin: 0 0 36px;
    scroll-margin-top: 88px;
}
.nd-lmain .nd-info-section h2{
    margin: 0 0 14px;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--l-ink);
}
.nd-lmain .nd-info-section h3{
    margin: 22px 0 8px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--l-ink);
}
.nd-lmain .nd-info-section p,
.nd-lmain .nd-info-section ul,
.nd-lmain .nd-info-section ol{
    margin: 0 0 14px;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--l-body);
}
.nd-lmain .nd-info-section li{ margin-bottom: 6px; }
.nd-lmain .nd-info-body a{
    color: var(--p1);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(91,108,255,.35);
}

@media (max-width: 900px){
    .nd-legal{
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .nd-legal-toc{
        position: static;
        border-left: 0;
        padding-left: 0;
        border: 1px solid var(--l-hair);
        border-radius: 14px;
        background: var(--surface);
    }
    .nd-legal-toggle{ display: block; }
    .nd-legal-toggle summary{
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 48px;
        padding: 0 16px;
        list-style: none;
        cursor: pointer;
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--l-ink);
    }
    .nd-legal-toggle summary::-webkit-details-marker{ display: none; }
    .nd-legal-toggle summary::after{
        content: "";
        width: 9px;
        height: 9px;
        border-right: 2px solid rgba(17,18,20,.42);
        border-bottom: 2px solid rgba(17,18,20,.42);
        transform: rotate(45deg) translateY(-2px);
    }
    .nd-legal-toggle[open] summary::after{ transform: rotate(225deg) translateY(-2px); }
    /* the list lives outside the <details> so it can stay open on desktop */
    .nd-legal-toggle:not([open]) ~ ol{ display: none; }
    .nd-legal-toc-title{ display: none; }
    .nd-legal-toc ol{
        padding: 0 16px 12px;
        max-height: none;
    }
    .nd-legal-toc a{
        display: flex;
        align-items: center;
        min-height: 40px;
        padding: 2px 0;
    }
    .nd-lmain .nd-info-page{ padding: 32px 0 56px; }
}