/*
 * LambuVet landing site.
 *
 * Hand-written and self-contained on purpose: this folder is zipped and dropped
 * onto hosting on its own, so it has no build step, no framework and no request
 * to anywhere else. Inter is served from beside this file rather than from
 * Google, because a landing page that stalls on a font is a landing page nobody
 * finishes reading on a Nigerian mobile connection.
 */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('inter.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
    /* The logo's green, its lime, and nothing else but black on white. */
    --green: #0c3320;
    --green-deep: #061d12;
    --lime: #a9df49;
    --ink: #000000;
    --ink-muted: #525252;
    --ink-subtle: #7d7d7d;
    --white: #ffffff;
    --sunken: #f5f5f5;
    --line: #e5e5e5;
    --line-strong: #d1d1d1;

    --wrap: 1152px;
    --radius: 10px;
    --radius-sm: 5px;
    --radius-md: 7px;
}

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

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

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
}

h1,
h2,
h3 {
    margin: 0;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

/* The platform steps its headings at one breakpoint rather than scaling them
   with the viewport, so the two sites read at the same size on the same phone
   instead of drifting apart between them. */
h1 {
    font-size: 34px;
    line-height: 1.1;
    font-weight: 600;
}

h2 {
    font-size: 28px;
    line-height: 1.25;
    font-weight: 600;
}

h3 {
    font-size: 17px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: normal;
}

@media (min-width: 640px) {
    h1 {
        font-size: 44px;
    }

    h2 {
        font-size: 34px;
    }
}

p {
    margin: 0;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding-inline: 20px;
}

@media (min-width: 640px) {
    .wrap {
        padding-inline: 24px;
    }
}

/* The questions column is set narrower than the rest, as it is on the platform. */
.narrow {
    max-width: 768px;
}

/* A section's opening lines are held to a readable measure rather than run to
   the full width of the wrap, which on a wide screen is far too long a line. */
.measure {
    max-width: 672px;
}

.skip {
    position: absolute;
    left: -9999px;
}

/* Names things that are only shown as an icon, for anyone reading by ear. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip:focus {
    left: 12px;
    top: 12px;
    z-index: 100;
    padding: 10px 14px;
    background: var(--green);
    color: var(--white);
    border-radius: 8px;
}

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

/* The direct child only: the menu panel below carries a .wrap of its own for
   its gutter, and it must not be turned into a 64px flex row too. */
.site-header > .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 64px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.025em;
    flex-shrink: 0;
}

.brand img {
    width: 32px;
    height: 32px;
}

.brand span span {
    color: var(--ink-subtle);
}

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

.nav a {
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-muted);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}

.nav a:hover {
    background: var(--sunken);
    color: var(--ink);
}

.nav a[aria-current='page'] {
    color: var(--ink);
    font-weight: 600;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}


@media (max-width: 767px) {
    .nav {
        display: none;
    }
}

/* On the narrowest phones the brand, the button and the menu are together
   wider than the screen, which pushed the whole page into a sideways scroll
   and cut the right edge off every section below. */
@media (max-width: 380px) {
    .wrap {
        padding-inline: 14px;
    }

    .site-header > .wrap {
        gap: 10px;
    }

    .header-actions {
        gap: 6px;
    }

    .header-actions .btn {
        padding-inline: 10px;
    }
}

/*
 * The mobile menu.
 *
 * A <details> rather than a button and a script: it opens, closes and takes
 * focus on its own in every browser, keyboard included, and it still works if
 * the JavaScript never arrives — which on this site is always, because there
 * isn't any. The summary marker is removed so the bars can stand on their own.
 */
.menu {
    flex-shrink: 0;
}

.menu > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: -4px;
    border-radius: var(--radius-md);
    color: var(--ink-muted);
    cursor: pointer;
    list-style: none;
    transition: background-color 0.15s, color 0.15s;
}

.menu > summary::-webkit-details-marker {
    display: none;
}

.menu > summary:hover {
    background: var(--sunken);
    color: var(--ink);
}

.menu .icon {
    width: 20px;
    height: 20px;
}

.menu > summary .icon-close,
.menu[open] > summary .icon-open {
    display: none;
}

.menu[open] > summary .icon-close {
    display: block;
}

/* A closed <details> hides its content with content-visibility rather than
   display, which leaves the panel's links with layout boxes hanging off the
   side of the screen. Taking them out of layout entirely keeps anything that
   measures the page honest. */
.menu:not([open]) .menu-panel {
    display: none;
}

/* The panel is pinned under the bar rather than pushed into it, so opening the
   menu never moves the page behind it. */
.menu-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.16);
}

.menu-panel nav {
    display: grid;
    gap: 2px;
    padding-block: 12px;
}

.menu-panel a {
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
}

.menu-panel a:hover {
    background: var(--sunken);
}

@media (min-width: 768px) {
    .menu {
        display: none;
    }
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.btn-sm {
    height: 32px;
    gap: 6px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.btn-primary {
    background: var(--green);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--green-deep);
}

.btn-secondary {
    background: var(--white);
    border-color: var(--line-strong);
    color: var(--ink);
}

.btn-secondary:hover {
    background: var(--sunken);
}

.btn-ghost {
    color: var(--ink-muted);
}

.btn-ghost:hover {
    background: var(--sunken);
    color: var(--ink);
}

.btn-lg {
    height: 44px;
    padding: 0 20px;
    font-size: 15px;
}

.btn-on-dark {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.25);
}

.btn-on-dark:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

/* Login drops off the bar on a narrow phone — it is the first thing in the
   menu, and keeping it there is what pushed the header off the screen. The
   selector outweighs `.btn` deliberately: a bare `.btn-login` would lose to
   the display it sets, whatever order the two are written in. */
@media (max-width: 639px) {
    .header-actions .btn-login {
        display: none;
    }
}

/* ----------------------------------------------------------------- sections */

section {
    border-bottom: 1px solid var(--line);
}

.pad {
    padding-block: 64px;
}

@media (min-width: 640px) {
    .pad {
        padding-block: 80px;
    }
}

/* The hero alone gets more air on a wide screen, as it does on the platform. */
@media (min-width: 1024px) {
    .pad-hero {
        padding-block: 96px;
    }
}

.sunken {
    background: var(--sunken);
}

.dark {
    background: var(--green);
    color: var(--white);
    border-bottom: none;
}

.dark h2 {
    color: var(--white);
}

.dark p {
    color: rgba(255, 255, 255, 0.72);
}

.eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 8px;
}

.dark .eyebrow {
    color: var(--lime);
}

.lede {
    margin-top: 18px;
    font-size: 17px;
    line-height: 28px;
    color: var(--ink-muted);
    max-width: 576px;
}

.prose p + p {
    margin-top: 18px;
}

.prose {
    color: var(--ink-muted);
    font-size: 16.5px;
    line-height: 1.75;
    max-width: 68ch;
}

/* -------------------------------------------------------------------- grids */

.split {
    display: grid;
    gap: 40px;
    align-items: center;
}

@media (min-width: 1024px) {
    .split {
        grid-template-columns: 1fr 1fr;
        gap: 56px;
    }

    .split.flip > *:first-child {
        order: 2;
    }
}

.cards {
    display: grid;
    gap: 32px;
    margin-top: 40px;
}

@media (min-width: 640px) {
    .cards {
        grid-template-columns: 1fr 1fr;
    }
}

/* The icon sits beside the heading and its paragraph, not above them, so the
   text block stays a single column the eye can run down. */
.card-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.card-body .icon {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    color: var(--green);
}

.card p {
    margin-top: 8px;
    color: var(--ink-muted);
    font-size: 15px;
    line-height: 24px;
}

.shot {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--sunken);
}

.shot-wide {
    aspect-ratio: 3 / 2;
    margin-bottom: 20px;
}

.shot-raised {
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.04);
}

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

.note {
    margin-top: 16px;
    font-size: 13px;
    color: var(--ink-subtle);
}

/* --------------------------------------------------------------------- steps */

/*
 * The seven steps of the model. One column on a phone, two from md — never
 * three, because the sequence is read in order and a three-up grid makes the
 * eye jump rows to follow it.
 */
.steps {
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
    display: grid;
    gap: 28px;
    counter-reset: step;
}

@media (min-width: 768px) {
    .steps {
        grid-template-columns: 1fr 1fr;
        gap: 32px 40px;
    }
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.step-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--green);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.step h3 {
    margin-bottom: 6px;
}

.step p {
    color: var(--ink-muted);
    font-size: 15px;
    line-height: 24px;
}

/* The goal is one short statement, so it is set centred and a little larger
   than body copy rather than dressed up as another card. */
.goal-lede {
    margin-inline: auto;
    font-size: 18px;
}

/* ------------------------------------------------------------------ feature */

.feature {
    display: grid;
    gap: 36px;
    align-items: center;
    padding: 56px 0;
    border-bottom: 1px solid var(--line);
}

.feature:last-child {
    border-bottom: none;
}

@media (min-width: 900px) {
    .feature {
        grid-template-columns: 1fr 1fr;
        gap: 56px;
    }

    .feature.flip .feature-text {
        order: 2;
    }
}

.feature-number {
    font-size: 12.5px;
    font-weight: 640;
    letter-spacing: 0.06em;
    color: var(--green);
    margin-bottom: 10px;
}

.feature h2 {
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
}

.feature p {
    margin-top: 14px;
    color: var(--ink-muted);
    line-height: 1.7;
}

.placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    background: var(--sunken);
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder span {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--lime);
    opacity: 0.5;
}

/* ---------------------------------------------------------------------- faq */

.faq {
    border-top: 1px solid var(--line);
    margin-top: 32px;
}

.faq > div {
    border-bottom: 1px solid var(--line);
    padding: 20px 0;
}

.faq dt {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

.faq dd {
    margin: 8px 0 0;
    color: var(--ink-muted);
    line-height: 28px;
    font-size: 15px;
}

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

.contact-grid {
    display: grid;
    gap: 32px;
    margin-top: 36px;
}

@media (min-width: 760px) {
    .contact-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.contact-card {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.contact-card h3 {
    margin-bottom: 6px;
}

.contact-card a {
    color: var(--green);
    font-weight: 560;
    text-decoration: none;
}

.contact-card a:hover {
    text-decoration: underline;
}

.contact-card p {
    color: var(--ink-muted);
    font-size: 15px;
}

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

.site-footer {
    background: var(--sunken);
    border-top: 1px solid var(--line);
    padding-block: 40px;
}

/* Two columns on a phone and five from md, so the link lists sit beside the
   brand rather than stacking into a long scroll — the platform's arrangement. */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.footer-brand {
    grid-column: span 2;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .footer-brand {
        grid-column: span 1;
    }
}

.footer-grid h4 {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.footer-grid ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
}

.footer-grid a {
    font-size: 13px;
    color: var(--ink-muted);
    text-decoration: none;
}

.footer-grid a:hover {
    color: var(--ink);
}

.footer-blurb {
    margin-top: 12px;
    font-size: 13px;
    line-height: 20px;
    color: var(--ink-muted);
    max-width: 320px;
}

.footer-base {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--ink-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.footer-base a {
    color: var(--ink-muted);
}

/* --------------------------------------------------- helpers used by pages */

.btn-lime {
    background: var(--lime);
    color: var(--green-deep);
}

.btn-lime:hover {
    background: #b8e864;
}

.center {
    text-align: center;
}

.center-actions {
    justify-content: center;
}

.flush {
    border-bottom: none;
}

.faq-flush {
    margin-top: 0;
}

.prose {
    margin-top: 22px;
}

.muted {
    margin-top: 8px;
}

.inline-link {
    color: var(--green);
    font-weight: 560;
}