/* Use case page template v2 (layout: use_case_v2) */

body {
    background: #fff;
    color: #1a1d29;
    font-family: Inter, Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

.uc2 a,
.uc2 a:hover {
    text-decoration: none;
}

.uc2-wrap {
    display: flex;
    flex-direction: column;
    gap: 100px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px 96px;
}

/* Scoped to <section>, which is what this layout's own blocks use, so it does
   not reach into the shared v1 components - those are <div class="container">
   and keep their own heading colours from styles.css. Without the scope this
   rule (0,1,1) outranks every single-class heading colour in them: .cta-title
   turned dark on the CTA's dark background, and .header lost its muted grey. */
.uc2 section h1,
.uc2 section h2,
.uc2 section h3 {
    color: #1a1d29;
    font-family: inherit;
}

/* Buttons */
.uc2-cta-row {
    margin-top: 40px;
}

.uc2-btn {
    display: inline-block;
    padding: 18px 34px;
    border-radius: 999px;
    background: #0a7cff;
    color: #fff !important;
    font-size: 20px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s;
}

.uc2-btn:hover {
    background: #0066dd;
}

.uc2-btn-sm {
    padding: 14px 26px;
    font-size: 16px;
}

.uc2-btn-grad {
    background: linear-gradient(90deg, #7c3aed, #3b82f6);
    font-weight: 600;
}

.uc2-btn-grad:hover {
    background: linear-gradient(90deg, #6d28d9, #2563eb);
}

.uc2-btn-white {
    display: inline-block;
    padding: 14px 26px;
    border-radius: 999px;
    background: #fff;
    color: #141a2b !important;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}

/* Hero */
.uc2-hero {
    padding-top: 96px;
    text-align: center;
}

.uc2 .uc2-hero h1 {
    margin: 0;
    font-size: clamp(48px, 7vw, 84px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

.uc2-hero-sub {
    margin: 20px 0 0;
    font-size: 20px;
    color: #6b7280;
}

.uc2-users {
    margin-top: 22px;
    font-size: 16px;
    color: #6b7280;
}

.uc2-trust {
    margin-top: 10px;
    font-size: 14px;
    color: #6b7280;
}

/* Tool page hero (Test HTML, HTML Viewer) */
.uc2-tool-desc {
    max-width: 750px;
    margin: 24px auto 0;
    font-size: 20px;
    line-height: 1.5;
    color: #4d4d4d;
}

.uc2-reviews {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
}

.uc2-stars {
    font-size: 22px;
}

.uc2-tool-users {
    margin-top: 24px;
    opacity: 0.4;
}

/* Intro */
.uc2-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(200px, 0.8fr);
    gap: 48px;
    align-items: center;
    padding: 0 40px;
}

.uc2 .uc2-intro h2 {
    margin: 0;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.uc2-intro p {
    margin: 20px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: #374151;
}

.uc2-intro-img {
    display: flex;
    justify-content: center;
}

.uc2-intro-img img {
    width: 100%;
    max-width: 320px;
    max-height: 220px;
    object-fit: contain;
}

/* Section headings */
.uc2-head {
    text-align: center;
}

.uc2-head {
    margin-bottom: 44px;
}

.uc2-eyebrow {
    margin-bottom: 8px;
    font-size: 20px;
    color: #6b7280;
}

.uc2 .uc2-title {
    max-width: 820px;
    margin: 0 auto;
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-wrap: balance;
}

.uc2-lede {
    max-width: 680px;
    margin: 16px auto 0;
    font-size: 17px;
    line-height: 1.55;
    color: #4b5563;
}

/* Comparison table */
.uc2-table {
    overflow: hidden;
    border: 1px solid #e6e8ee;
    border-radius: 20px;
    background: #fafbfd;
}

.uc2-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(120px, 0.7fr) minmax(120px, 0.7fr);
    gap: 16px;
    align-items: center;
    padding: 20px 28px;
    border-bottom: 1px solid #eef0f4;
}

.uc2-row-head {
    padding: 18px 28px;
    border-bottom-color: #e6e8ee;
    font-size: 14px;
    color: #6b7280;
    text-align: center;
}

.uc2-row-head .uc2-us {
    font-size: 15px;
    font-weight: 700;
    color: #1a1d29;
}

.uc2-row-title {
    font-size: 16px;
    font-weight: 600;
}

.uc2-row-desc {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.45;
    color: #6b7280;
}

.uc2-yes {
    font-size: 15px;
    font-weight: 600;
    color: #16a34a;
    text-align: center;
    white-space: nowrap;
}

.uc2-others {
    font-size: 14px;
    color: #9ca3af;
    text-align: center;
}

.uc2-easier {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    align-items: center;
    padding: 22px 28px;
    font-size: 14px;
    color: #6b7280;
}

.uc2-easier span:first-child {
    font-weight: 600;
    color: #1a1d29;
}

/* Pricing */
.uc2-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.uc2-plan {
    padding: 32px;
    border: 1px solid #e6e8ee;
    border-radius: 20px;
    background: #fff;
}

.uc2-plan-alt {
    background: #fafbfd;
}

.uc2-plan-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

.uc2-price {
    margin-top: 8px;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.uc2-price span {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    color: #6b7280;
}

.uc2-plan ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    line-height: 1.45;
    color: #374151;
}

.uc2-plan .uc2-muted {
    color: #6b7280;
}

.uc2-plan-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 28px;
    font-size: 14px;
    color: #6b7280;
}

.uc2-sizes {
    margin-top: 56px;
    padding: 36px 32px;
    border: 1px solid #e6e8ee;
    border-radius: 20px;
    background: #fff;
}

.uc2-sizes-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
}

.uc2 .uc2-sizes-head h3 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.uc2-sizes-head span {
    font-size: 14px;
    color: #6b7280;
}

.uc2-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 28px;
}

.uc2-tier {
    padding: 18px 16px;
    border: 1px solid #eef0f4;
    border-radius: 14px;
    background: #fafbfd;
}

.uc2-tier .uc2-plan-label {
    font-size: 12px;
}

.uc2-tier-size {
    margin-top: 6px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.uc2-tier-note {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.uc2-sizes > p {
    margin: 22px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: #4b5563;
}

/* API and agents */
.uc2-api {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 48px;
    align-items: start;
    padding: 56px 40px;
    border-radius: 24px;
    background: #141a2b;
    color: #fff;
}

.uc2-api-eyebrow {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a78bfa;
}

.uc2 .uc2-api h2 {
    margin: 12px 0 0;
    color: #fff;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.uc2-api > div > p {
    margin: 18px 0 0;
    font-size: 17px;
    line-height: 1.55;
    color: #c7cbd6;
}

.uc2-api-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 32px;
}

.uc2-api-card {
    padding: 16px;
    border: 1px solid #2a3145;
    border-radius: 14px;
}

.uc2-api-card strong {
    display: block;
    font-weight: 700;
}

.uc2-api-card span {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.45;
    color: #a3a9b8;
}

.uc2-api-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 32px;
    font-size: 14px;
    color: #a3a9b8;
}

.uc2-code {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #2a3145;
    border-radius: 16px;
    background: #0b0f1a;
}

.uc2-code-bar {
    padding: 12px 16px;
    border-bottom: 1px solid #2a3145;
    font-size: 12px;
    color: #6b7280;
}

.uc2-code pre {
    margin: 0;
    padding: 20px 22px;
    overflow-x: auto;
    color: #e5e7eb;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre;
}

.uc2-code .k {
    color: #a78bfa;
}

.uc2-code .s {
    color: #86efac;
}

.uc2-code .c {
    color: #6b7280;
}



@media (max-width: 768px) {
.uc2-wrap {
        gap: 72px;
        padding-top: 40px;
    }

.uc2-hero {
        padding-top: 72px;
    }

.uc2-btn {
        padding: 16px 28px;
        font-size: 18px;
    }

.uc2-intro {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 0;
    }

.uc2-row {
        grid-template-columns: minmax(0, 1fr) 64px 84px;
        gap: 10px;
        padding: 16px;
    }

.uc2-easier {
        padding: 18px 16px;
    }

.uc2-api {
        padding: 40px 20px;
    }

.uc2-api-cards {
        grid-template-columns: 1fr;
    }
}

/* Tool page hero: keep the compact proportions of the original tool pages */
.uc2-hero-tool {
    padding-top: 64px;
}

.uc2 .uc2-hero-tool h1 {
    font-size: clamp(40px, 5vw, 60px);
    letter-spacing: -0.02em;
}

.uc2-hero-tool .uc2-tool-desc {
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.6;
}

.uc2-hero-tool .uc2-reviews {
    margin-top: 24px;
}

.uc2-hero-tool .uc2-stars {
    font-size: 15px;
    letter-spacing: 0.1em;
}

.uc2-hero-tool .uc2-tool-users {
    margin-top: 16px;
    font-size: 14px;
}

.uc2-hero-tool .uc2-trust {
    margin-top: 6px;
    font-size: 13px;
}

/* Editor starts right under the hero, as before */
.uc2-hero-tool + .uc2-tool {
    margin-top: -60px;
}

/* Code sample fits a phone screen without sideways scrolling */
@media (max-width: 768px) {
    .uc2-code pre {
        padding: 16px;
        font-size: 12px;
    }
}



@media (max-width: 420px) {
.uc2-code pre {
        padding: 14px;
        font-size: 11px;
    }
}

/* Shared v1 components inside the v2 page
   ---------------------------------------
   The how-to, features, examples, resources, FAQ, CTA and related-links
   sections come from the site-wide includes, which carry their own outer
   vertical spacing: .padded-section adds margin-top 60px plus 32px of padding,
   .cta-box adds margin 72px 0, and .tool-links-container adds margin 60px.
   Stacked on .uc2-wrap's 100px flex gap that leaves them drifting much further
   apart than the sections this layout still renders itself. Zero the outer
   spacing and let the gap alone do the work.

   .grey-box is excluded from the padding reset: its 64px is the inset of the
   visible grey panel around the how-to steps, not spacing between sections. */
.uc2-wrap > .padded-section {
    margin-top: 0;
}

.uc2-wrap > .padded-section:not(.grey-box) {
    padding-top: 0;
    padding-bottom: 0;
}

.uc2-wrap .cta-box {
    margin: 0;
}

.uc2-wrap > .tool-links-container {
    margin: 0 auto;
}