/* =====================================================================
   examina.io — Landing page (ported from the approved Direction B mock)
   Class names deliberately mirror the mock's own stylesheet so the
   template can be diffed against the mock draft.
   ===================================================================== */

.landing-page { font-size: 15px; background: #fff; }

.ld-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section-padding { padding: 100px 0; }

.text-gradient {
    background: var(--ex-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.bg-gradient { background: var(--ex-gradient); }

.btn-pill {
    border-radius: 9999px;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    padding: 12px 32px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    cursor: pointer;
    text-decoration: none;
}
.btn-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -5px rgba(0, 172, 172, .3); text-decoration: none; }
.btn-pill--white { background: #fff; color: #334155; border: 2px solid #f1f5f9; }
.btn-pill--white:hover { border-color: #99f6e4; color: #334155; }
.btn-pill--gradient { background: var(--ex-gradient); color: #fff; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1); }
.btn-pill--gradient:hover { color: #fff; }

.card-modern {
    background: #fff;
    border-radius: 24px;
    padding: 32px;
    border: 1px solid rgba(0, 0, 0, .05);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -1px rgba(0, 0, 0, .03);
    transition: transform .3s ease;
}
.card-modern:hover { transform: translateY(-4px); }

.icon-tile {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
}
.icon-tile svg { width: 24px; height: 24px; }
.icon-tile--teal { background: #ccfbf1; color: #0d9488; }
.icon-tile--blue { background: #dbeafe; color: #2563eb; }
.icon-tile--blue-soft { background: #eff6ff; color: #2563eb; }
.icon-tile--purple { background: #f3e8ff; color: #9333ea; }
.icon-tile--orange { background: #ffedd5; color: #ea580c; }
.icon-tile--pink { background: #fce7f3; color: #db2777; }
.icon-tile--emerald { background: #d1fae5; color: #059669; }

/* ------------------------------- Nav -------------------------------- */
.ld-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    padding: 16px 0;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
}
.ld-nav__inner { display: flex; align-items: center; justify-content: space-between; }
/* Navigation labels are one or two short words in English and routinely longer
   once translated. A flex row shrinks its items before it overflows, so the
   first thing a longer label does is break in the middle of a word — "À /
   PROPOS" — and the second is push the whole bar onto two lines. Neither
   registers as an overflow, so neither is visible to anything but an eye.

   Items therefore never wrap, and the space between them gives way instead:
   the clamps reach their maximum at 1280px, so English is unchanged at the
   width it was designed for and longer languages take the slack below it. */
.ld-nav ul {
    display: flex; align-items: center; flex-wrap: nowrap; gap: clamp(2px, 0.63vw, 8px);
    list-style: none; margin: 0; padding: 0;
    /* Reaches 13px at 1280 — the width this bar was designed at, so English is
       untouched there — and gives back a little below it, which is the band
       where a longer language would otherwise run off the end of the row. */
    font-size: clamp(11px, 1.02vw, 13px); font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .025em;
}
.nav-link-pill { white-space: nowrap; padding: 8px clamp(7px, 1.25vw, 16px); border-radius: 9999px; transition: all .2s; color: inherit; }
.nav-link-pill:hover { background: rgba(0, 172, 172, .1); color: var(--ex-teal); text-decoration: none; }
.nav-link-pill.is-active { color: #0d9488; }
.ld-nav .btn-pill { white-space: nowrap; margin-left: clamp(6px, 1.25vw, 16px); padding: 10px clamp(14px, 1.88vw, 24px); font-size: 13px; }
.ld-nav__toggle { display: none; }

/* 1079, not 1023: the row collapses where the *longest* supported language stops
   fitting, not where English does. English still fits at 1024 and French does
   not, and a breakpoint set to English silently clips the last French item
   instead of collapsing. Re-measure this number when a language is added — the
   widest translation of the eight labels is what sets it. */
@media (max-width: 1079px) {
    .ld-nav ul {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: #fff;
        padding: 14px 18px 20px;
        max-height: calc(100vh - var(--ex-nav-height));
        max-height: calc(100dvh - var(--ex-nav-height));
        overflow-y: auto;
        overscroll-behavior: contain;
        border-bottom: 1px solid #f3f4f6;
        box-shadow: 0 18px 45px rgba(30, 41, 59, .12);
    }
    .ld-nav ul.is-open { display: flex; }
    .ld-nav .nav-link-pill { display: block; padding: 12px 14px; }
    .ld-nav .btn-pill { margin: 8px 0 0; }
    .ld-nav__toggle {
        display: block;
        /* The links live in a <nav> wrapper that stays a flex item here: only the
           <ul> inside it goes absolute, so the wrapper collapses to zero width
           rather than leaving the flow. justify-content: space-between then has
           three items to place and parks the toggle between the brand and that
           empty wrapper - about a third of the way in from the right edge.
           An auto margin pins the toggle to the end regardless of how many
           zero-width siblings follow it. */
        margin-left: auto;
        padding: 10px;
        background: transparent;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        cursor: pointer;
        color: #1e293b;
    }
    .ld-nav__toggle span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; }
    .ld-nav__toggle span + span { margin-top: 4px; }
}

/* ------------------------------- Hero ------------------------------- */
.ld-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--ex-soft-teal);
    padding-top: 80px;
}
.ld-hero__wash {
    position: absolute; top: 0; right: 0;
    width: 50%; height: 100%;
    background: linear-gradient(to left, rgba(240, 253, 250, .5), transparent);
    pointer-events: none;
}
.ld-hero__blob {
    position: absolute;
    bottom: -96px; left: -96px;
    width: 384px; height: 384px;
    background: #dbeafe;
    border-radius: 50%;
    filter: blur(64px);
    opacity: .5;
}
.ld-hero__grid {
    position: relative; z-index: 10;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
    align-items: center;
}
.ld-eyebrow {
    display: inline-block;
    padding: 6px 16px;
    margin-bottom: 24px;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: #0f766e;
    background: #ccfbf1;
    border-radius: 9999px;
    text-transform: uppercase;
}
.ld-hero h1 { font-size: 64px; line-height: 1.1; font-weight: 800; color: #0f172a; margin-bottom: 24px; }
.ld-hero__sub { font-size: 28px; color: #475569; font-weight: 500; margin-bottom: 32px; line-height: 1.375; font-family: var(--ex-font-display); }
.ld-hero__desc { color: #64748b; font-size: 1.125rem; margin-bottom: 40px; max-width: 540px; line-height: 1.65; }
.ld-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.ld-hero__media { position: relative; }
.ld-hero__frame {
    position: relative; z-index: 10;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
    border: 8px solid #fff;
}
.ld-hero__frame img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ld-hero__frame::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top right, rgba(13, 148, 136, .2), transparent);
}
.ld-hero__badge {
    position: absolute;
    bottom: -24px; right: -24px;
    z-index: 20;
    background: #fff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1);
    display: flex; align-items: center; gap: 16px;
    animation: ld-bounce 1s infinite;
}
/* Tailwind's animate-bounce, as used by the mock */
@keyframes ld-bounce {
    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); }
    50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); }
}
@media (prefers-reduced-motion: reduce) {
    .ld-hero__badge { animation: none; }
}
.ld-hero__badge-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: #ccfbf1; color: #0d9488;
    display: flex; align-items: center; justify-content: center;
}
.ld-hero__badge-icon svg { width: 24px; height: 24px; }
.ld-hero__badge-number { font-size: 1.5rem; font-weight: 700; color: #0f172a; font-family: var(--ex-font-display); }
.ld-hero__badge-label { font-size: .75rem; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

/* ------------------------- Section headings -------------------------- */
.ld-section-head { text-align: center; max-width: 672px; margin: 0 auto 80px; }
.ld-section-head h2 { font-size: 2.25rem; font-weight: 800; color: #0f172a; margin-bottom: 24px; }
.ld-section-head p { color: #64748b; font-size: 1.125rem; margin: 0; }

.ld-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }

/* ------------------------------ About -------------------------------- */
.ld-about-logo {
    width: 80px; height: 80px;
    margin: 0 auto 24px;
    border-radius: 16px;
    background: #f0fdfa;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .05);
}
.ld-about-logo img { width: 40px; }
.card-modern--teal-top { border-top: 4px solid #14b8a6; }
.card-modern--blue-top { border-top: 4px solid #3b82f6; }
.card-modern--grey { background: #f8fafc; }
.card-modern h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 16px; }
.card-modern p { color: #64748b; font-size: .875rem; line-height: 1.65; margin-bottom: 16px; }
.card-modern p:last-child { margin-bottom: 0; }
.ld-voice-quote { font-style: italic; color: #334155; font-weight: 500; line-height: 1.65; margin-bottom: 32px; }
.ld-voice-person { display: flex; align-items: center; }
.ld-voice-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--ex-gradient);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    border: 2px solid #fff;
    box-shadow: var(--ex-shadow-sm);
    margin-right: 16px;
    flex: 0 0 48px;
}
.ld-voice-name { font-weight: 700; color: #1e293b; }
.ld-voice-role { color: #0d9488; font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .1em; }

/* ------------------------------- Demo -------------------------------- */
.ld-demo { background: var(--ex-soft-blue); }
.ld-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 40px; }
.tab-modern {
    padding: 12px 24px;
    border-radius: 9999px;
    font-weight: 600;
    transition: all .3s;
    color: #64748b;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--ex-font-body);
    font-size: .95rem;
}
.tab-modern:hover { color: #0d9488; text-decoration: none; }
.tab-modern.active { background: var(--ex-gradient); color: #fff !important; }

.ld-demo__frame {
    position: relative;
    background: #0f172a;
    aspect-ratio: 16 / 9;
    width: 100%;
    border-radius: 32px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
    overflow: hidden;
    border: 8px solid #fff;
}
.ld-demo__frame .video-container { position: absolute; inset: 0; display: none; }
.ld-demo__frame .video-container.active { display: block; }
.ld-demo__frame video { width: 100%; height: 100%; object-fit: contain; background: #0f172a; }

.ld-demo__controls { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 40px; gap: 24px; }
.ld-demo__control {
    display: flex; align-items: center;
    background: #fff;
    padding: 12px 24px;
    border-radius: 9999px;
    box-shadow: var(--ex-shadow-sm);
    gap: 16px;
}
.ld-demo__control--slider { flex: 1 1 auto; max-width: 300px; }
.ld-demo__control-label { font-size: .875rem; font-weight: 700; color: #475569; white-space: nowrap; }
.ld-demo__control input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%; height: 8px;
    background: #f1f5f9;
    border-radius: 9999px;
    outline: none;
}
.ld-demo__control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #14b8a6;
    box-shadow: var(--ex-shadow);
    cursor: pointer;
}

/* ---------------------------- Milestones ------------------------------ */
.ld-milestone { padding: 96px 0; background: #0f172a; position: relative; overflow: hidden; }
.ld-milestone__bg { position: absolute; inset: 0; opacity: .2; }
.ld-milestone__bg img { width: 100%; height: 100%; object-fit: cover; }
.ld-milestone__grid {
    position: relative; z-index: 10;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 48px;
    text-align: center;
}
.ld-milestone__number {
    font-size: 3.75rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: -.05em;
    font-family: var(--ex-font-display);
    transition: color .2s;
}
.ld-milestone__cell:hover .ld-milestone__number { color: #2dd4bf; }
.ld-milestone__label { font-size: .75rem; font-weight: 700; color: #14b8a6; text-transform: uppercase; letter-spacing: .2em; }

/* ------------------------------- Apps --------------------------------- */
.ld-app { text-align: center; }
.ld-app__tile {
    width: 128px; height: 128px;
    margin: 0 auto 32px;
    border-radius: 28px;
    display: flex; align-items: center; justify-content: center;
    transition: all .3s;
}
.ld-app__tile--teal { background: #f0fdfa; }
.ld-app__tile--blue { background: #eff6ff; }
.ld-app:hover .ld-app__tile--teal { background: #ccfbf1; transform: rotate(-3deg); }
.ld-app:hover .ld-app__tile--blue { background: #dbeafe; transform: rotate(3deg); }
.ld-app__tile img { width: 64px; }
.ld-app h3 { font-size: 1.5rem; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
.ld-app__role { color: #0d9488; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.ld-app p { color: #64748b; font-size: .875rem; line-height: 1.65; padding: 0 16px; }

/* ------------------------------- Quote -------------------------------- */
.ld-quote { padding: 128px 0; background: #0d9488; position: relative; overflow: hidden; }
.ld-quote__bg { position: absolute; inset: 0; }
.ld-quote__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.ld-quote__bg::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom right, #0d9488, #1d4ed8);
    mix-blend-mode: multiply;
}
.ld-quote__inner { position: relative; z-index: 10; text-align: center; }
.ld-quote h2 { font-size: 42px; font-weight: 700; color: #fff; line-height: 1.25; margin-bottom: 32px; }
.ld-quote h2 u { text-decoration-color: #2dd4bf; }
.ld-quote p { font-size: 1.25rem; color: #f0fdfa; font-weight: 500; margin: 0; }

/* ----------------------------- Features ------------------------------- */
.ld-features { background: #f8fafc; }
.card-modern--flat { border: 0; box-shadow: var(--ex-shadow-sm); }
.card-modern--flat:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1); }
.card-modern h4 { font-size: 1.125rem; font-weight: 700; color: #0f172a; margin-bottom: 12px; }
.ld-feature-link { color: #0d9488; font-size: .75rem; font-weight: 700; display: inline-block; margin-bottom: 8px; }
.ld-feature-link:hover { text-decoration: underline; }

/* ---------------------------- Action box ------------------------------ */
.ld-action { padding: 80px 0; }
.ld-action__box {
    background: var(--ex-gradient);
    padding: 48px;
    border-radius: 40px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
.ld-action__left { display: flex; align-items: center; gap: 32px; }
.ld-action__icon {
    width: 80px; height: 80px;
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 24px;
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 80px;
}
.ld-action__icon img { width: 40px; }
.ld-action h3 { font-size: 1.875rem; font-weight: 800; color: #fff; margin-bottom: 8px; text-transform: uppercase; letter-spacing: -.025em; }
.ld-action p { color: #f0fdfa; font-size: 1.125rem; opacity: .9; margin: 0; }
.ld-action .btn-pill { background: #fff; color: #0d9488; font-size: 1.25rem; padding: 16px 48px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1); }
.ld-action .btn-pill:hover { background: #f0fdfa; }

/* ------------------------------ Learn --------------------------------- */
.ld-learn-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 64px; gap: 24px; }
.ld-learn-head h2 { font-size: 2.25rem; font-weight: 800; color: #0f172a; margin-bottom: 16px; }
.ld-learn-head p { color: #64748b; margin: 0; }
.ld-learn-all { color: #0d9488; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ld-learn-all:hover { text-decoration: underline; }
.ld-learn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.ld-video { cursor: pointer; display: block; text-decoration: none; }
.ld-video:hover { text-decoration: none; }
.ld-video__thumb {
    position: relative;
    margin-bottom: 24px;
    aspect-ratio: 16 / 9;
    background: #f1f5f9;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: var(--ex-shadow-sm);
    transition: box-shadow .3s;
}
.ld-video:hover .ld-video__thumb { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1); }
.ld-video__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ld-video:hover .ld-video__thumb img { transform: scale(1.1); }
.ld-video__thumb::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .2);
    transition: background .2s;
}
.ld-video:hover .ld-video__thumb::after { background: rgba(15, 23, 42, .1); }
.ld-video__duration {
    position: absolute;
    bottom: 16px; right: 16px;
    z-index: 1;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(12px);
    color: #0f172a;
    font-size: .75rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 9999px;
}
.ld-video h4 { font-weight: 700; color: #1e293b; font-size: 1rem; margin: 0; transition: color .2s; }
.ld-video:hover h4 { color: #0d9488; }

/* --------------------------- Testimonials ----------------------------- */
.ld-testimonial { background: #0f172a; color: #fff; position: relative; overflow: hidden; }
.ld-testimonial__blob-tl, .ld-testimonial__blob-br {
    position: absolute;
    width: 384px; height: 384px;
    border-radius: 50%;
    filter: blur(100px);
}
.ld-testimonial__blob-tl { top: -160px; left: -160px; background: rgba(20, 184, 166, .1); }
.ld-testimonial__blob-br { bottom: -160px; right: -160px; background: rgba(59, 130, 246, .1); }
.ld-testimonial__inner { position: relative; z-index: 10; text-align: center; }
.ld-testimonial h2 { font-size: 2.25rem; font-weight: 800; color: #fff; margin-bottom: 80px; text-transform: uppercase; letter-spacing: -.025em; }
.ld-testimonial blockquote {
    font-size: clamp(1.6rem, 3.4vw, 2.25rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.65;
    margin: 0 auto 48px;
    max-width: 896px;
    position: relative;
    z-index: 10;
}
.ld-testimonial__name { color: #2dd4bf; font-size: 1.125rem; font-weight: 700; letter-spacing: .025em; }
.ld-testimonial__org { color: #94a3b8; font-weight: 500; text-transform: uppercase; font-size: .75rem; letter-spacing: .2em; margin-top: 8px; }
.ld-testimonial__track { position: relative; }
/* Giant faded quote glyph behind the blockquote, per the mock */
.ld-testimonial__mark {
    position: absolute;
    top: -64px;
    left: 50%;
    margin-left: -470px;
    width: 96px; height: 96px;
    color: rgba(20, 184, 166, .2);
    z-index: 0;
    pointer-events: none;
}
@media (max-width: 1023px) {
    .ld-testimonial__mark { left: 0; margin-left: 0; top: -48px; width: 72px; height: 72px; }
}
.ld-testimonial__slide {
    display: none;
    animation: ld-testimonial-in .5s ease both;
}
.ld-testimonial__slide.active { display: block; }
@keyframes ld-testimonial-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
.ld-testimonial__dots { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.ld-testimonial__dots button {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #334155;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background-color .2s, transform .2s;
}
.ld-testimonial__dots button:hover { background: #475569; transform: scale(1.2); }
.ld-testimonial__dots button.active { background: #14b8a6; }

/* ------------------------------ Pricing ------------------------------- */
.ld-pricing { background: var(--ex-soft-teal); }
.ld-pricing__period { display: flex; justify-content: center; margin-bottom: 32px; }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}
.pricing-card {
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #edf2f7;
}
.pricing-card.featured {
    border: 2px solid var(--ex-teal);
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .1);
}
.pricing-card.custom { border: 2px solid var(--ex-amber); }
.pricing-card__ribbon {
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 6px 0;
    text-align: center;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.pricing-card.custom .pricing-card__ribbon { background: #f59e0b; color: #0f172a; }
.pricing-card__body { padding: 32px 32px 0; }
.pricing-card h3 {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 24px;
}
.pricing-card__price { min-height: 74px; margin-bottom: 32px; }
.pricing-card__price-state { min-height: 74px; }
.pricing-card__price-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pricing-card__amount { font-size: 2.25rem; font-weight: 900; color: #0f172a; font-family: var(--ex-font-display); }
.pricing-card__amount--sm { font-size: 1.5rem; }
.pricing-card__tenure { color: #64748b; font-size: .75rem; font-weight: 700; }
.pricing-card__billing-detail {
    min-height: 20px;
    margin: 3px 0 0;
    color: #64748b;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.45;
}
.pricing-card ul { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.pricing-card li { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: #475569; }
.pricing-card li svg { width: 16px; height: 16px; color: #14b8a6; flex: 0 0 16px; }
.pricing-card.custom li svg { color: #f59e0b; }
.pricing-card li.star { font-weight: 700; color: #0d9488; }
.pricing-card li.ai-credit { font-weight: 700; color: #0f766e; }
.pricing-card .ai-credit__copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.35; }
.pricing-card .ai-credit__copy small { margin-top: 3px; color: #64748b; font-size: .7rem; font-weight: 600; }
.pricing-card__foot { padding: 0 32px 32px; margin-top: auto; }
.pricing-card__foot .btn-pill { width: 100%; }
.btn-pill--slate-soft { background: #f1f5f9; color: #0f172a; }
.btn-pill--slate-soft:hover { background: #e2e8f0; color: #0f172a; }
.btn-pill--slate { background: #1e293b; color: #fff; }
.btn-pill--slate:hover { background: #0f172a; color: #fff; }
.btn-pill--outline { background: transparent; border: 2px solid #e2e8f0; color: #334155; }
.btn-pill--outline:hover { border-color: var(--ex-teal); color: #0d9488; }
.btn-pill--amber { background: #f59e0b; color: #0f172a; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1); }
.btn-pill--amber:hover { background: #d97706; color: #0f172a; }

.ld-ai-pricing {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    margin-top: 48px;
    padding: 28px 32px;
    border: 1px solid #99f6e4;
    border-radius: 24px;
    background: rgba(255, 255, 255, .9);
    box-shadow: var(--ex-shadow-sm);
}
.ld-ai-pricing__icon {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 18px;
    background: var(--ex-gradient);
    color: #fff;
    font-family: var(--ex-font-display);
    font-size: 1.1rem;
    font-weight: 900;
}
.ld-ai-pricing h3 { margin: 0 0 8px; color: #0f172a; font-size: 1.25rem; }
.ld-ai-pricing p { margin: 0; color: #475569; line-height: 1.6; }
.ld-ai-pricing .ld-ai-pricing__rule { margin-top: 8px; color: #0f766e; }
/* Reads as something to press rather than a run of bold body text, which is what
   it looked like sitting inline beside two paragraphs. */
.ld-ai-pricing__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border: 1px solid #99f6e4;
    border-radius: 9999px;
    background: rgba(0, 172, 172, .08);
    color: #0f766e;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .2s, border-color .2s, color .2s;
}

.ld-ai-pricing__cta:hover,
.ld-ai-pricing__cta:focus {
    background: rgba(0, 172, 172, .16);
    border-color: var(--ex-teal);
    color: #115e59;
    text-decoration: none;
}

.ld-pricing__footnotes { margin-top: 48px; text-align: center; color: #64748b; font-size: .85rem; }
.ld-pricing__footnotes ul { list-style: none; margin: 0 0 16px; padding: 0; }
.ld-pricing__more { margin-top: 32px; text-align: center; color: #64748b; }
.ld-pricing__more a { color: #0d9488; font-weight: 700; text-decoration: underline; text-decoration-color: #99f6e4; }
.ld-pricing__more a:hover { text-decoration-color: #0d9488; }

/* ------------------------------ Contact ------------------------------- */
.ld-contact__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px;
    align-items: center;
}
.ld-contact h2 { font-size: 2.25rem; font-weight: 800; color: #0f172a; margin-bottom: 24px; }
.ld-contact__lede { color: #64748b; font-size: 1.125rem; margin-bottom: 40px; line-height: 1.65; }
.ld-contact__rows { display: flex; flex-direction: column; gap: 32px; }
.ld-contact__row { display: flex; align-items: flex-start; }
.ld-contact__row .icon-tile { border-radius: 16px; margin: 0; flex: 0 0 48px; }
.ld-contact__row-body { margin-left: 16px; }
.ld-contact__row h4 {
    font-weight: 700; color: #0f172a;
    text-transform: uppercase; font-size: .75rem; letter-spacing: .1em;
    margin-bottom: 4px;
}
.ld-contact__row p { color: #64748b; font-size: .875rem; margin: 0; }
.ld-contact__row a { color: #0d9488; font-weight: 700; }

.ld-contact__form {
    background: #f8fafc;
    padding: 40px;
    border-radius: 32px;
    border: 1px solid #f1f5f9;
}
.ld-contact__form label { display: block; font-size: .875rem; font-weight: 700; color: #334155; margin-bottom: 8px; }
.ld-contact__form .form-control,
.ld-contact__form input[type="text"],
.ld-contact__form input[type="email"],
.ld-contact__form textarea {
    width: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 16px 24px;
    border-radius: 16px;
    font-family: var(--ex-font-body);
    font-size: .95rem;
    color: var(--ex-heading);
    transition: all .2s;
}
.ld-contact__form .form-control:focus,
.ld-contact__form textarea:focus {
    outline: none;
    border-color: #14b8a6;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, .12);
}
.ld-contact__form .ld-field { margin-bottom: 24px; }
.ld-contact__form .btn-pill { width: 100%; padding: 20px; font-size: 1.125rem; }

/* ------------------------------ Responsive ---------------------------- */
@media (max-width: 1023px) {
    .ld-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .ld-hero__media { display: none; }
    .ld-hero h1 { font-size: 44px; }
    .ld-hero__sub { font-size: 22px; }
    .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pricing-card.featured { transform: none; }
    .ld-ai-pricing { grid-template-columns: 56px minmax(0, 1fr); }
    .ld-ai-pricing > a { grid-column: 2; white-space: normal; }
    .ld-learn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ld-contact__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 767px) {
    .section-padding { padding: 64px 0; }
    .ld-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .ld-milestone__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pricing-grid { grid-template-columns: minmax(0, 1fr); }
    .ld-ai-pricing { grid-template-columns: minmax(0, 1fr); padding: 24px; }
    .ld-ai-pricing > a { grid-column: 1; }
    .ld-learn-grid { grid-template-columns: minmax(0, 1fr); }
    .ld-learn-head { flex-direction: column; align-items: flex-start; }
    .ld-action__box { flex-direction: column; text-align: center; }
    .ld-action__left { flex-direction: column; }
    .ld-quote h2 { font-size: 30px; }
    .ld-hero { min-height: 0; padding-bottom: 64px; }
}

/* ---------------------- Embed & integrate section ---------------------- */
.ld-integrate { background: #f8fafc; }

/* The two paths, side by side at the point of decision. Equal width because the
   choice is genuine; the depth that follows is not equal, and does not need to be. */
.ld-integrate__paths {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 0 0 48px;
}

.ld-integrate__path {
    padding: 26px 28px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
}

.ld-integrate__path h3 { margin: 12px 0 8px; font-size: 20px; color: #1e293b; }
.ld-integrate__path p { margin: 0; font-size: 15px; line-height: 1.65; color: #475569; }

.ld-integrate__tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ld-integrate__tag--teal { background: rgba(0, 172, 172, .12); color: #00726f; }
.ld-integrate__tag--blue { background: rgba(52, 143, 226, .12); color: #1d6fb8; }

.ld-integrate__eyebrow {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #94a3b8;
}

.ld-integrate__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.ld-integrate__point { display: flex; gap: 18px; margin-bottom: 30px; }
.ld-integrate__point h4 { margin: 2px 0 6px; font-size: 18px; color: #1e293b; }
.ld-integrate__point p { margin: 0; font-size: 15px; line-height: 1.65; color: #475569; }
.ld-integrate__point .icon-tile { flex: 0 0 auto; }

.ld-integrate__cta { display: inline-block; margin-top: 6px; }

/* The sample is the persuasive part for a developer reader, so it is styled as a
   terminal rather than left as body copy. Dark on a light section, which is what
   makes it read as a thing you run rather than a thing you read. */
.ld-integrate__code {
    background: #0b1220;
    border: 1px solid #1e293b;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.ld-code__bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    background: #111c30;
    border-bottom: 1px solid #1e293b;
}

.ld-code__bar span { width: 10px; height: 10px; border-radius: 50%; background: #334155; }
.ld-code__bar span:first-child { background: #f87171; }
.ld-code__bar span:nth-child(2) { background: #fbbf24; }
.ld-code__bar span:nth-child(3) { background: #34d399; }
.ld-code__bar em { margin-left: 8px; font-style: normal; font-size: 12px; color: #94a3b8; }

.ld-integrate__code pre {
    margin: 0;
    padding: 20px 22px 24px;
    overflow-x: auto;   /* a long token scrolls the block, never the page */
    background: transparent;
    border: 0;
}

.ld-integrate__code code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.75;
    color: #cbd5e1;
    white-space: pre;
    background: transparent;
    padding: 0;
}

.ld-integrate__code .c-com { color: #64748b; font-style: italic; }
.ld-integrate__code .c-key { color: #5eead4; font-weight: 700; }
.ld-integrate__code .c-att { color: #7dd3fc; }
.ld-integrate__code .c-str { color: #fcd34d; }
.ld-integrate__code .c-num { color: #f9a8d4; }

@media (max-width: 900px) {
    .ld-integrate__split { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .ld-integrate__paths { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 34px; }
    .ld-integrate__code pre { padding: 16px 18px 20px; }
    .ld-integrate__code code { font-size: 11.5px; }
}