/* Pennant Labs landing page. All classes use the lp- prefix. Loaded only by _LandingLayout.cshtml. */

:root {
    /* Backgrounds, cool and taken from the logo */
    --lp-bg: #FFFFFF;
    --lp-tint: #F2F5FF;
    --lp-tint-2: #E6ECFF;
    --lp-ink: #12134A;      /* dark sections, footer */
    --lp-navy: #23246A;     /* headings, header text, secondary text on tint */
    --lp-blue: #0B24F0;     /* primary buttons, links, focus on light */
    --lp-sky: #22AEF5;      /* decorative: link underline on hover, motif, numbers on dark */
    --lp-cyan: #4FDCFB;     /* decorative on light; text and focus on --lp-ink only */
    --lp-line: #E3E7F3;     /* borders and dividers */
    --lp-muted: #4E5573;    /* secondary text, input borders */
    --lp-on-ink: #D6DAF2;   /* body text on --lp-ink */
    --lp-error-text: #9B1C1C;

    --lp-radius-card: 12px;
    --lp-radius-control: 10px;

    --lp-heading: "Lexend", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --lp-sans: "DM Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --lp-mono: "JetBrains Mono", Consolas, "Courier New", monospace;

    --lp-shadow-soft: 0 1px 2px rgba(18, 19, 74, 0.06), 0 8px 24px rgba(18, 19, 74, 0.06);
}

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

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

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body.lp-body {
    margin: 0;
    font-family: var(--lp-sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--lp-ink);
    background: var(--lp-bg);
    overflow-x: hidden;
    overflow-wrap: anywhere;
}

body.lp-body img {
    display: block;
    max-width: 100%;
    height: auto;
}

body.lp-body h1,
body.lp-body h2,
body.lp-body h3 {
    font-family: var(--lp-heading);
    color: var(--lp-navy);
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.02em;
}

body.lp-body h1 {
    font-size: clamp(2.6rem, 5.5vw, 4.5rem);
    line-height: 1.05;
    font-weight: 700;
}

body.lp-body h2 {
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    line-height: 1.15;
}

body.lp-body h3 {
    font-size: 1.15rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

body.lp-body p {
    margin: 0;
}

/* Generic text-link colour. Excludes .lp-btn so button colours always win.
   Kept at specificity 0,1,1 so the component link classes below (nav, footer, skip) can override it. */
a:not(.lp-btn) {
    color: var(--lp-blue);
}

a:not(.lp-btn):hover {
    text-decoration-color: var(--lp-sky);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Headings and text on dark sections (the generic heading colour would otherwise win) */
body.lp-body .lp-section--ink h1,
body.lp-body .lp-section--ink h2,
body.lp-body .lp-section--ink h3 {
    color: #FFFFFF;
}

body.lp-body .lp-cta h2 {
    color: #FFFFFF;
}

body.lp-body .lp-footer__heading {
    color: var(--lp-cyan);
}

body.lp-body .lp-footer .lp-brand span {
    color: #FFFFFF;
}

body.lp-body .lp-skip {
    color: #FFFFFF;
}

/* Focus: blue ring on light backgrounds, cyan on ink, white on the blue CTA band */
body.lp-body :focus-visible {
    outline: 2px solid var(--lp-blue);
    outline-offset: 2px;
}

body.lp-body .lp-section--ink :focus-visible,
body.lp-body .lp-footer :focus-visible {
    outline-color: var(--lp-cyan);
}

body.lp-body .lp-cta :focus-visible {
    outline-color: #FFFFFF;
}

.lp-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.lp-skip {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    background: var(--lp-blue);
    color: #FFFFFF;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
}

.lp-skip:focus {
    top: 12px;
}

.lp-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Labels and tags: JetBrains Mono only */
.lp-eyebrow,
.lp-section-num,
.lp-case__label,
.lp-contact__label,
.lp-steps__num,
.lp-footer__heading,
.lp-confirm,
.lp-todo,
.lp-frame__bar {
    font-family: var(--lp-mono);
}

.lp-eyebrow,
.lp-section-num,
.lp-case__label,
.lp-contact__label,
.lp-footer__heading {
    font-size: 12.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lp-eyebrow {
    color: var(--lp-cyan);
    margin-bottom: 20px;
}

.lp-section-num {
    color: var(--lp-muted);
    margin-bottom: 12px;
}

.lp-confirm {
    display: inline-block;
    color: var(--lp-navy);
    border-bottom: 1px dashed currentColor;
    font-size: 11.5px;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

.lp-confirm--dark {
    color: var(--lp-cyan);
}

.lp-todo {
    color: var(--lp-navy);
    border-bottom: 1px dashed currentColor;
    font-size: 12.5px;
    letter-spacing: 0.02em;
}

.lp-optional {
    color: var(--lp-muted);
    font-weight: 400;
}

.lp-link {
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--lp-sky);
    padding-bottom: 1px;
}

/* Sections */
.lp-section {
    padding: clamp(64px, 9vw, 112px) 0;
    background: var(--lp-bg);
}

.lp-section--tint {
    background: var(--lp-tint);
}

.lp-section--ink {
    background: var(--lp-ink);
    color: var(--lp-on-ink);
}

.lp-section__head {
    margin-bottom: 48px;
    max-width: 680px;
}

/* Buttons: 48px tall */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 22px;
    border-radius: var(--lp-radius-control);
    border: 1px solid transparent;
    font: 600 1rem/1 var(--lp-sans);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lp-btn--primary {
    background: var(--lp-blue);
    border-color: var(--lp-blue);
    color: #FFFFFF;
}

.lp-btn--primary:hover {
    background: var(--lp-navy);
    border-color: var(--lp-navy);
    color: #FFFFFF;
}

/* On the dark hero the blue fill is close to the background, so the primary button gets a white 40% edge */
.lp-section--ink .lp-btn--primary {
    border-color: rgba(255, 255, 255, 0.4);
}

.lp-section--ink .lp-btn--primary:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

/* Secondary on light: navy outline */
.lp-btn--ghost {
    background: transparent;
    color: var(--lp-navy);
    border-color: var(--lp-navy);
}

.lp-btn--ghost:hover {
    background: var(--lp-navy);
    color: #FFFFFF;
}

/* Secondary on dark: white at 40% outline */
.lp-btn--ghost-dark {
    background: transparent;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.4);
}

.lp-btn--ghost-dark:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #FFFFFF;
    color: #FFFFFF;
}

.lp-btn--white {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--lp-blue);
}

.lp-btn--white:hover {
    background: var(--lp-tint-2);
    border-color: var(--lp-tint-2);
    color: var(--lp-navy);
}

.lp-btn--block {
    width: 100%;
}

.lp-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Header */
.lp-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--lp-bg);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.lp-header.is-scrolled {
    border-bottom-color: var(--lp-line);
}

.lp-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 96px;
}

.lp-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--lp-navy);
}

.lp-brand img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.lp-brand span {
    font-family: var(--lp-heading);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
    color: var(--lp-navy);
}

/* Badge on its own white circle, for use on dark backgrounds */
.lp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: #FFFFFF;
    border-radius: 50%;
}

.lp-badge img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.lp-nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.lp-nav__links {
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-nav__links a,
.lp-nav__login {
    color: var(--lp-navy);
    text-decoration: none;
    font-size: 0.97rem;
    font-weight: 500;
}

.lp-nav__links a:hover,
.lp-nav__login:hover {
    text-decoration: underline;
    text-decoration-color: var(--lp-sky);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.lp-nav__actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.lp-nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-control);
    cursor: pointer;
    position: relative;
}

.lp-nav-toggle__bars,
.lp-nav-toggle__bars::before,
.lp-nav-toggle__bars::after {
    display: block;
    position: absolute;
    left: 12px;
    width: 18px;
    height: 2px;
    background: var(--lp-navy);
    content: "";
}

.lp-nav-toggle__bars {
    top: 20px;
}

.lp-nav-toggle__bars::before {
    top: -6px;
    left: 0;
}

.lp-nav-toggle__bars::after {
    top: 6px;
    left: 0;
}

/* Hero (dark) */
.lp-hero {
    padding: clamp(64px, 9vw, 112px) 0 clamp(72px, 9vw, 120px);
}

.lp-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

.lp-hero__copy {
    max-width: 760px;
}

.lp-hero h1 {
    color: #FFFFFF;
}

.lp-lede {
    margin-top: 24px;
    font-size: 1.2rem;
    line-height: 1.65;
    color: var(--lp-on-ink);
    max-width: 36em;
}

.lp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.lp-proof {
    margin-top: 28px;
    color: var(--lp-on-ink);
    font-size: 0.97rem;
}

.lp-proof .lp-confirm {
    margin-left: 6px;
}

/* Products */
.lp-product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 48px;
    align-items: center;
    background: var(--lp-bg);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-card);
    padding: 40px;
    margin-bottom: 24px;
}

.lp-product--reverse {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

.lp-product--reverse .lp-product__copy {
    order: 2;
}

.lp-product--text {
    grid-template-columns: 1fr;
}

.lp-product__copy h3 {
    font-size: 1.6rem;
    margin-bottom: 12px;
}

.lp-product__copy p {
    color: var(--lp-muted);
    margin-bottom: 16px;
}

.lp-product__media {
    margin: 0;
}

/* Browser frame around product screenshots */
.lp-frame {
    border: 1px solid var(--lp-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--lp-bg);
}

.lp-frame__bar {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    background: var(--lp-tint);
    border-bottom: 1px solid var(--lp-line);
}

.lp-frame__bar i {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #C5CBE0;
}

.lp-frame img {
    width: 100%;
    height: auto;
}

/* Selected work */
.lp-case {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 24px;
    padding: 28px 0;
    border-top: 1px solid var(--lp-line);
}

.lp-case:last-child {
    border-bottom: 1px solid var(--lp-line);
}

.lp-case__label {
    color: var(--lp-muted);
    padding-top: 4px;
}

.lp-case dl {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 10px 24px;
    margin: 0;
}

.lp-case dt {
    color: var(--lp-muted);
    font-size: 0.95rem;
}

.lp-case dd {
    margin: 0;
}

/* How we work: four steps in a row, joined by a hairline */
.lp-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}

.lp-steps::before {
    content: "";
    position: absolute;
    top: 21px;
    left: 22px;
    width: 75%;
    height: 1px;
    background: var(--lp-line);
}

.lp-steps li {
    position: relative;
}

.lp-steps__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--lp-blue);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
}

.lp-steps h3 {
    margin-bottom: 8px;
}

.lp-steps p {
    color: var(--lp-muted);
    font-size: 0.97rem;
}

/* Company */
.lp-company {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}

.lp-company p:not(.lp-section-num) {
    color: var(--lp-ink);
    font-size: 1.08rem;
}

/* CTA band */
.lp-cta {
    background: var(--lp-blue);
    color: #FFFFFF;
    padding: clamp(48px, 6vw, 72px) 0;
}

.lp-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.lp-cta h2 {
    color: #FFFFFF;
    font-size: clamp(1.6rem, 2.8vw, 2.25rem);
    max-width: 22em;
}

/* Contact */
.lp-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 64px;
    align-items: start;
}

.lp-contact__lines {
    list-style: none;
    margin: 0 0 24px 0;
    padding: 0;
    border-top: 1px solid var(--lp-line);
}

.lp-contact__lines li {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid var(--lp-line);
}

.lp-contact__label {
    color: var(--lp-muted);
}

.lp-contact__reply {
    color: var(--lp-muted);
}

.lp-contact__reply .lp-confirm {
    margin-left: 6px;
}

.lp-contact__form {
    background: var(--lp-bg);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-card);
    padding: 32px;
    box-shadow: var(--lp-shadow-soft);
}

.lp-field {
    margin-bottom: 18px;
}

.lp-field label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 6px;
    color: var(--lp-navy);
}

.lp-field input,
.lp-field select,
.lp-field textarea {
    width: 100%;
    font: 400 1rem/1.5 var(--lp-sans);
    color: var(--lp-ink);
    background: var(--lp-bg);
    border: 1px solid var(--lp-muted);
    border-radius: var(--lp-radius-control);
    padding: 11px 14px;
}

.lp-field textarea {
    resize: vertical;
    min-height: 120px;
}

.lp-field input:focus,
.lp-field select:focus,
.lp-field textarea:focus {
    outline: 2px solid var(--lp-blue);
    outline-offset: 1px;
    border-color: var(--lp-blue);
}

/* Honeypot: off-screen, not display:none, so it stays out of the tab order and out of view */
.lp-hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lp-form-note {
    margin-top: 16px;
    font-size: 0.9rem;
    color: var(--lp-muted);
}

.lp-form-status {
    margin-top: 14px;
    font-size: 0.97rem;
    min-height: 1.5em;
}

.lp-form-status.is-ok {
    color: var(--lp-navy);
}

.lp-form-status.is-error {
    color: var(--lp-error-text);
}

.lp-notice {
    padding: 12px 14px;
    border: 1px solid var(--lp-line);
    border-left-width: 4px;
    border-radius: var(--lp-radius-control);
    background: var(--lp-tint);
    margin-bottom: 20px;
}

.lp-notice.is-ok {
    border-left-color: var(--lp-blue);
}

.lp-notice.is-error {
    border-left-color: var(--lp-error-text);
    color: var(--lp-error-text);
}

/* Footer (ink) */
.lp-footer {
    background: var(--lp-ink);
    color: var(--lp-on-ink);
    padding-top: 72px;
}

.lp-footer__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 40px;
}

.lp-footer .lp-brand,
.lp-footer .lp-brand span {
    color: #FFFFFF;
}

.lp-footer__brand p {
    margin-top: 16px;
    color: var(--lp-on-ink);
    max-width: 22em;
}

.lp-footer__heading {
    color: var(--lp-cyan);
    margin-bottom: 14px;
}

.lp-footer__col p,
.lp-footer__col li {
    color: #FFFFFF;
    font-size: 0.97rem;
}

.lp-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-footer__col li {
    margin-bottom: 8px;
}

.lp-footer__col a {
    color: #FFFFFF;
}

.lp-footer__col a:hover {
    text-decoration-color: var(--lp-sky);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.lp-footer__bottom {
    margin-top: 56px;
    padding-top: 20px;
    padding-bottom: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.lp-footer__bottom p {
    color: var(--lp-on-ink);
    font-size: 0.9rem;
}

/* Reveal on scroll: only hidden when motion is allowed, and JS falls back to visible */
@media (prefers-reduced-motion: no-preference) {
    .lp-reveal {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .lp-reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .lp-hero__grid,
    .lp-company,
    .lp-contact {
        grid-template-columns: 1fr;
    }

    .lp-hero__grid {
        gap: 48px;
    }

    .lp-product,
    .lp-product--reverse {
        grid-template-columns: 1fr;
        padding: 28px;
    }

    .lp-product--reverse .lp-product__copy {
        order: 0;
    }

    .lp-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 40px;
    }

    .lp-steps::before {
        display: none;
    }
}

@media (max-width: 900px) {
    .lp-nav-toggle {
        display: block;
    }

    .lp-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 20px 24px 28px;
        background: var(--lp-bg);
        border-bottom: 1px solid var(--lp-line);
    }

    .lp-nav.is-open {
        display: flex;
    }

    .lp-nav__links {
        flex-direction: column;
        gap: 14px;
    }

    .lp-nav__links a,
    .lp-nav__login {
        font-size: 1.05rem;
    }

    .lp-nav__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .lp-nav__actions .lp-btn {
        width: 100%;
    }

    .lp-header__inner {
        position: relative;
    }

    .lp-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .lp-hero__visual {
        margin-top: 8px;
    }

    .lp-case,
    .lp-case dl {
        grid-template-columns: 1fr;
    }

    .lp-case dl {
        gap: 4px 0;
    }

    .lp-case dt {
        margin-top: 10px;
    }

    .lp-cta__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .lp-contact__form {
        padding: 24px;
    }

    .lp-contact {
        gap: 40px;
    }
}

@media (max-width: 600px) {
    .lp-steps {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .lp-wrap {
        padding: 0 16px;
    }

    .lp-brand span {
        font-size: 1.05rem;
    }

    .lp-hero__visual {
        padding: 20px 0 0 20px;
    }

    .lp-actions .lp-btn,
    .lp-cta .lp-btn {
        width: 100%;
    }

    .lp-case dd {
        overflow-wrap: anywhere;
    }

    .lp-footer__grid {
        grid-template-columns: 1fr;
    }

    .lp-product {
        padding: 20px;
    }

    .lp-contact__lines li {
        grid-template-columns: 84px minmax(0, 1fr);
    }
}

@media (max-width: 360px) {
    body.lp-body {
        font-size: 16px;
    }

    .lp-brand img {
        width: 64px;
        height: 64px;
    }

    .lp-contact__form {
        padding: 20px 16px;
    }
}


/* ===== Hero run-log card + DocExtract mock (append to Content/landing.css) ===== */

/* hero: copy left, card right */
.lp-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.lp-hero__visual{position:relative;min-width:0;padding:40px 0}
.lp-motif{position:absolute;inset:0;pointer-events:none}
.lp-motif span{position:absolute;display:block}
.lp-motif__sq{width:170px;height:170px;border-radius:24px;background:#0B24F0;transform:rotate(45deg);left:-20px;bottom:0;opacity:.85}
.lp-motif__sky{width:120px;height:120px;border-radius:20px;background:#22AEF5;transform:rotate(45deg);right:30px;top:-6px;opacity:.55}
.lp-motif__tri{width:0;height:0;border-left:70px solid transparent;border-right:70px solid transparent;border-bottom:120px solid #4FDCFB;right:-10px;bottom:20px;opacity:.35}

.lp-run{position:relative;z-index:1;background:#fff;color:#1A1C3D;border-radius:16px;padding:18px 20px;box-shadow:0 24px 48px rgba(0,0,0,.28);font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:13px;max-width:440px;margin-left:auto}
.lp-run__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #E2E6F3;font-family:"Lexend","Segoe UI",sans-serif;font-size:14px;font-weight:500;color:#23246A}
.lp-run__tag{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:#4E5573;background:#F3F6FF;padding:3px 8px;border-radius:99px;font-weight:400}
.lp-run__rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lp-run-row{display:grid;grid-template-columns:46px 1fr auto;gap:10px;align-items:center;font-variant-numeric:tabular-nums}
.lp-run-row time{color:#4E5573}
.lp-st{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:500;padding:3px 9px;border-radius:99px;white-space:nowrap}
.lp-st--ok{background:#E3F5EC;color:#0F7B4F}
.lp-st--rv{background:#FFF1DC;color:#8A5200}
.lp-st--q{background:#E5EBFF;color:#0B24F0}

@media (max-width:900px){
  .lp-hero__grid{grid-template-columns:1fr;gap:16px}
  .lp-run{margin:0 auto}
}
@media (max-width:480px){
  .lp-motif__sq{width:110px;height:110px}
  .lp-run{font-size:12px;padding:14px}
  .lp-run-row{grid-template-columns:40px 1fr auto;gap:8px}
}

/* DocExtract review mock (lives inside the existing .lp-frame) */
.lp-dx{display:grid;grid-template-columns:.85fr 1.15fr;min-height:320px;background:#fff;text-align:left}
.lp-dx__doc{background:#F3F6FF;padding:20px;border-right:1px solid #E2E6F3}
.lp-dx__page{background:#fff;border-radius:6px;box-shadow:0 2px 8px rgba(16,17,74,.08);padding:16px;height:100%;display:grid;gap:9px;align-content:start}
.lp-dx__page i{display:block;height:7px;border-radius:4px;background:#E7EAF4}
.lp-dx__page i.h{height:11px;width:60%;background:#CFD5EA;margin-bottom:6px}
.lp-dx__page i.hl{background:rgba(34,174,245,.3);outline:1.5px solid #22AEF5}
.lp-dx__page i.hl2{background:rgba(11,36,240,.15);outline:1.5px solid #0B24F0}
.lp-dx__fields{padding:18px 20px;min-width:0}
.lp-dx__ttl{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.lp-dx__ttl b{font-family:"Lexend","Segoe UI",sans-serif;color:#23246A;font-weight:600;font-size:15px}
.lp-dx table{width:100%;border-collapse:collapse;font-size:13.5px}
.lp-dx td{padding:9px 0;border-bottom:1px solid #E2E6F3}
.lp-dx td:first-child{color:#4E5573;width:42%}
.lp-dx td:nth-child(2){font-weight:600;color:#1A1C3D}
.lp-dx td:last-child{text-align:right}
.lp-conf{font-family:"JetBrains Mono",monospace;font-size:11.5px;padding:2px 7px;border-radius:99px;background:#E3F5EC;color:#0F7B4F}
.lp-conf--lo{background:#FFF1DC;color:#8A5200}
.lp-dx__act{display:flex;gap:8px;margin-top:14px}
.lp-dx__act span{font-size:13px;font-weight:600;padding:8px 14px;border-radius:8px}
.lp-dx__act .a1{background:#0B24F0;color:#fff}
.lp-dx__act .a2{border:1px solid #E2E6F3;color:#23246A}
.lp-dx__note{font-size:13px;color:#4E5573;margin:10px 0 0}
@media (max-width:560px){.lp-dx{grid-template-columns:1fr}.lp-dx__doc{display:none}}

/* motion hook: confidence rows tick in when the mock scrolls into view */
.lp-motion .lp-dx tr{opacity:0;transform:translateX(8px);transition:opacity .4s ease,transform .4s ease}
.lp-motion .is-in .lp-dx tr{opacity:1;transform:none}
.lp-motion .is-in .lp-dx tr:nth-child(2){transition-delay:.1s}
.lp-motion .is-in .lp-dx tr:nth-child(3){transition-delay:.2s}
.lp-motion .is-in .lp-dx tr:nth-child(4){transition-delay:.3s}
.lp-motion .is-in .lp-dx tr:nth-child(5){transition-delay:.4s}

/* company section without a photo: single readable column */
.lp-company{display:block;max-width:760px}

/* ===== Pennant Labs landing: simple motion (append to Content/landing.css) =====
   Everything is visible by default. Elements only start hidden once landing.js
   adds .lp-motion to <html>, so the page still reads fine without JS. */

/* 1. Scroll reveal: fade + rise once */
.lp-motion [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.lp-motion [data-reveal].is-in{opacity:1;transform:none}
.lp-motion [data-reveal-group] > *{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.lp-motion [data-reveal-group].is-in > *{opacity:1;transform:none}
.lp-motion [data-reveal-group].is-in > *:nth-child(2){transition-delay:.08s}
.lp-motion [data-reveal-group].is-in > *:nth-child(3){transition-delay:.16s}
.lp-motion [data-reveal-group].is-in > *:nth-child(4){transition-delay:.24s}
.lp-motion [data-reveal-group].is-in > *:nth-child(5){transition-delay:.32s}
.lp-motion [data-reveal-group].is-in > *:nth-child(n+6){transition-delay:.4s}

/* 2. Hero: headline, text and buttons arrive in sequence on load */
.lp-motion .lp-hero-in{animation:lp-up .7s cubic-bezier(.2,.7,.2,1) both}
.lp-motion .lp-hero-in:nth-child(2){animation-delay:.08s}
.lp-motion .lp-hero-in:nth-child(3){animation-delay:.16s}
.lp-motion .lp-hero-in:nth-child(4){animation-delay:.24s}
.lp-motion .lp-hero-in:nth-child(5){animation-delay:.32s}
@keyframes lp-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* 3. Hero run log: rows tick in one after another, then a status pulse */
.lp-motion .lp-run-row{opacity:0;transform:translateX(-8px);animation:lp-row .45s ease forwards}
.lp-motion .lp-run-row:nth-child(1){animation-delay:.5s}
.lp-motion .lp-run-row:nth-child(2){animation-delay:.9s}
.lp-motion .lp-run-row:nth-child(3){animation-delay:1.3s}
.lp-motion .lp-run-row:nth-child(4){animation-delay:1.7s}
@keyframes lp-row{to{opacity:1;transform:none}}
.lp-live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#16A34A;margin-right:6px;vertical-align:middle}
.lp-motion .lp-live-dot{animation:lp-pulse 2s ease-in-out infinite}
@keyframes lp-pulse{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}50%{box-shadow:0 0 0 6px rgba(22,163,74,0)}}

/* 4. Logo shapes behind the hero card drift very slowly */
.lp-motion .lp-motif > *{animation:lp-float 9s ease-in-out infinite alternate}
.lp-motion .lp-motif > *:nth-child(2){animation-duration:11s;animation-delay:-3s}
.lp-motion .lp-motif > *:nth-child(3){animation-duration:13s;animation-delay:-6s}
@keyframes lp-float{from{translate:0 0}to{translate:0 -10px}}

/* 5. Hover feedback */
.lp-btn{transition:background-color .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s}
.lp-btn:hover{transform:translateY(-1px)}
.lp-btn--primary:hover{box-shadow:0 8px 20px rgba(11,36,240,.25)}

/* Respect reduced motion: show everything, move nothing */
@media (prefers-reduced-motion:reduce){
  .lp-motion [data-reveal],.lp-motion [data-reveal-group] > *,.lp-motion .lp-hero-in,.lp-motion .lp-run-row,.lp-motion .lp-dx tr{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .lp-motion .lp-motif > *,.lp-motion .lp-live-dot{animation:none!important}
  .lp-btn:hover{transform:none}
}

/* ===== Services card grid (append to Content/landing.css; remove the old .svx-* rules) ===== */
.svc{
  --c-ink:#10114A; --c-navy:#23246A; --c-blue:#0B24F0; --c-sky:#22AEF5; --c-cyan:#4FDCFB;
  --c-tint:#F3F6FF; --c-tint2:#E5EBFF; --c-line:#E2E6F3; --c-muted:#4E5573; --c-text:#1A1C3D;
  background:#fff; padding-block:clamp(64px,9vw,112px);
}
.svc-head{display:grid;grid-template-columns:1fr 1fr;gap:20px 56px;align-items:end;margin-bottom:44px}
.svc-eyebrow{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-blue);margin:0 0 12px}
.svc .svc-head h2{font-family:"Lexend","Segoe UI",sans-serif;color:var(--c-navy);font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0}
.svc-lead{color:var(--c-muted);font-size:1.1rem;line-height:1.65;margin:0;max-width:52ch}

/* bento grid */
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
  grid-template-areas:"ui ui web py" "ui ui crm crm" "net and dash dash"}
.svc-a-ui{grid-area:ui}.svc-a-web{grid-area:web}.svc-a-py{grid-area:py}.svc-a-crm{grid-area:crm}
.svc-a-net{grid-area:net}.svc-a-and{grid-area:and}.svc-a-dash{grid-area:dash}

/* card */
.svc-card{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:26px 24px 24px;background:#fff;
  border:1px solid var(--c-line);border-radius:18px;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.svc-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c-blue);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.svc-card:hover{transform:translateY(-4px);border-color:#C9D2F5;box-shadow:0 2px 4px rgba(16,17,74,.04),0 18px 40px rgba(16,17,74,.10)}
.svc-card:hover::after{transform:scaleX(1)}
.svc .svc-card h3{font-family:"Lexend","Segoe UI",sans-serif;color:var(--c-navy);font-size:1.22rem;font-weight:600;letter-spacing:-.01em;line-height:1.25;margin:4px 0 0}
.svc-card p{color:var(--c-muted);font-size:15.5px;line-height:1.6;margin:0}

.svc-ic{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--c-tint);color:var(--c-blue);transition:background .2s,color .2s,transform .2s}
.svc-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc-card:hover .svc-ic{background:var(--c-blue);color:#fff;transform:rotate(-6deg)}

.svc a.svc-link{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px;color:var(--c-blue);font-family:"Lexend","Segoe UI",sans-serif;font-weight:500;font-size:15px;text-decoration:none;align-self:flex-start}
.svc a.svc-link::after{content:"→";transition:transform .2s}
.svc a.svc-link:hover{text-decoration:underline;text-decoration-color:var(--c-sky);text-decoration-thickness:2px;text-underline-offset:4px}
.svc-card:hover a.svc-link::after{transform:translateX(4px)}
.svc a.svc-link:focus-visible{outline:2px solid var(--c-blue);outline-offset:3px;border-radius:4px}
/* whole card is clickable through its link */
.svc-card a.svc-link::before{content:"";position:absolute;inset:0;border-radius:18px}

/* featured UiPath card (dark) */
.svc-card--feature{background:var(--c-ink);border-color:var(--c-ink);color:#fff;padding:32px 30px 30px;gap:16px}
.svc-card--feature::before{content:"";position:absolute;width:260px;height:260px;right:-70px;top:-70px;border-radius:44px;background:var(--c-blue);opacity:.55;transform:rotate(45deg);pointer-events:none}
.svc-card--feature::after{background:var(--c-cyan)}
.svc-card--feature:hover{border-color:var(--c-ink);box-shadow:0 22px 48px rgba(16,17,74,.30)}
.svc-card--feature > *{position:relative}
.svc-card--feature > a.svc-link{position:static} /* keep the whole-card click area */
.svc .svc-card--feature h3{color:#fff;font-size:clamp(1.5rem,2.4vw,1.95rem)}
.svc-card--feature p{color:#C5CBEF;font-size:16.5px;max-width:46ch}
.svc-card--feature .svc-ic{background:rgba(255,255,255,.1);color:var(--c-cyan)}
.svc-card--feature:hover .svc-ic{background:var(--c-cyan);color:var(--c-ink)}
.svc-card--feature a.svc-link{color:var(--c-cyan)}
.svc-card--feature a.svc-link:focus-visible{outline-color:var(--c-cyan)}
.svc-top{display:flex;justify-content:space-between;align-items:center}
.svc-pill{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink);background:var(--c-cyan);padding:5px 11px;border-radius:99px}

.svc-flow{list-style:none;margin:6px 0 4px;padding:0;display:grid;gap:8px}
.svc-flow li{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:15px;color:#fff}
.svc-flow__n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--c-blue);color:#fff;font-family:"Lexend",sans-serif;font-size:13px;font-weight:600}
.svc-flow li:last-child .svc-flow__n{background:#16A34A}

/* wide cards with a mini preview */
.svc-card--wide{flex-direction:row;gap:24px;align-items:stretch;background:var(--c-tint);border-color:var(--c-tint)}
.svc-card--wide:hover{border-color:#C9D2F5}
.svc-copy{display:flex;flex-direction:column;gap:12px;flex:1 1 0;min-width:0}
.svc-card--wide .svc-ic{background:#fff}
.svc-mini{flex:1 1 0;min-width:0;align-self:center;background:#fff;border-radius:14px;padding:16px;box-shadow:0 1px 2px rgba(16,17,74,.05),0 10px 24px rgba(16,17,74,.07);transition:transform .25s ease}
.svc-card--wide:hover .svc-mini{transform:translateY(-3px) rotate(-.6deg)}
.svc-mini__bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.svc-mini__bar b{font-family:"Lexend",sans-serif;font-size:13.5px;font-weight:500;color:var(--c-navy)}
.svc-mini__bar span{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--c-muted);background:var(--c-tint);padding:2px 8px;border-radius:99px}

.svc-att{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.svc-att li{display:grid;grid-template-columns:86px 1fr 38px;align-items:center;gap:10px;font-size:13px;color:var(--c-muted)}
.svc-att i{display:block;height:8px;border-radius:99px;background:var(--c-tint2);position:relative;overflow:hidden}
.svc-att i::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--c-blue);border-radius:99px}
.svc-att b{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--c-navy);text-align:right;font-weight:500}
.svc-msg{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--c-line);font-size:13px;color:var(--c-text)}
.svc-dot{width:8px;height:8px;border-radius:50%;background:#16A34A;flex:none}

.svc-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:96px}
.svc-bars i{display:block;height:var(--h);border-radius:6px 6px 2px 2px;background:var(--c-tint2)}
.svc-bars i.is-now{background:var(--c-blue)}
.svc-days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:6px;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--c-muted);text-align:center}

/* "not sure" strip */
.svc-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding:18px 22px;border:1px dashed #B8C2E6;border-radius:14px}
.svc-note p{margin:0;color:var(--c-muted)}
.svc-note b{color:var(--c-navy);font-weight:600}
.svc-note a.svc-link{margin-top:0;padding-top:0}

/* motion: bars and progress grow when the grid scrolls in (only when landing.js adds .lp-motion) */
.lp-motion .svc-grid .svc-bars i{transform:scaleY(0);transform-origin:bottom;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.lp-motion .svc-grid.is-in .svc-bars i{transform:none}
.lp-motion .svc-grid.is-in .svc-bars i:nth-child(2){transition-delay:.05s}
.lp-motion .svc-grid.is-in .svc-bars i:nth-child(3){transition-delay:.1s}
.lp-motion .svc-grid.is-in .svc-bars i:nth-child(4){transition-delay:.15s}
.lp-motion .svc-grid.is-in .svc-bars i:nth-child(5){transition-delay:.2s}
.lp-motion .svc-grid.is-in .svc-bars i:nth-child(6){transition-delay:.25s}
.lp-motion .svc-grid.is-in .svc-bars i:nth-child(7){transition-delay:.3s}
.lp-motion .svc-grid .svc-att i::before{transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1) .2s}
.lp-motion .svc-grid.is-in .svc-att i::before{transform:none}

/* responsive */
@media (max-width:1080px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"ui ui" "web py" "crm crm" "net and" "dash dash"}
}
@media (max-width:900px){ .svc-head{grid-template-columns:1fr} }
@media (max-width:640px){
  .svc-grid{grid-template-columns:1fr;grid-template-areas:"ui" "web" "py" "crm" "net" "and" "dash"}
  .svc-card--wide{flex-direction:column}
  .svc-mini{align-self:stretch}
  .svc-card--feature::before{width:180px;height:180px;right:-60px;top:-60px}
}
@media (prefers-reduced-motion:reduce){
  .svc-card,.svc-card::after,.svc-ic,.svc-mini,.svc a.svc-link::after{transition:none}
  .svc-card:hover,.svc-card:hover .svc-ic,.svc-card--wide:hover .svc-mini{transform:none}
  .lp-motion .svc-grid .svc-bars i,.lp-motion .svc-grid .svc-att i::before{transform:none!important;transition:none!important}
}

/* Motion fix: the reveal sets transitions on each card, which would block the hover lift and shadow.
   Once the grid is in view, give the cards their own hover transition. */
.lp-motion .svc-grid.is-in > .svc-card{transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,border-color .25s ease}
.lp-motion .svc-grid.is-in > .svc-card:hover{transform:translateY(-4px);transition-delay:0s}