/* ============================================================
   PAKISTANI AND BANGLADESHI DOCUMENT HUBS
   File: country-hub-page.css
   Path: /pages/
   Scope: .cty-translation-page body class only
   Shared by every page whose record in data/pages.php has
   'assets' => 'pages/country-hub-page'. A page's own rules, if any, are in the CSS file
   with its template's name, loaded after this one.
   ============================================================ */

/* ============================================================
   PAKISTANI DOCUMENT TRANSLATION HUB PAGE - CSS
   Manrope font, blue palette, pdt- prefix convention
   ============================================================ */

:root {
    --cty-primary:         #1a365d;
    --cty-primary-hover:   #22447a;
    --cty-accent:          #1a56a0;
    --cty-border:          #bee3f8;
    --cty-border-soft:     #e2e8f0;
    --cty-bg-page:         #f7fafc;
    --cty-bg-white:        #ffffff;
    --cty-bg-white-hover:  #e8f0fa;
    --cty-bg-light:        #ebf8ff;
    --cty-bg-alt:          #f0f7ff;
    --cty-text-dark:       #1a202c;
    --cty-text-body:       #2d3748;
    --cty-text-muted:      #4a5568;
    --cty-font:            'Manrope', sans-serif;
    --cty-fw-regular:      400;
    --cty-fw-medium:       500;
    --cty-fw-semibold:     600;
    --cty-fw-bold:         700;
    --cty-fs-xs:           0.875rem;
    --cty-fs-base:         1.125rem;
    --cty-fs-md:           1.25rem;
    --cty-fs-lg:           1.375rem;
    --cty-fs-xl:           1.5rem;
    --cty-fs-2xl:          1.75rem;
    --cty-fs-3xl:          2rem;
    --cty-fs-4xl:          2.5rem;
    --cty-fs-hero:         2.875rem;
    --cty-radius:          8px;
    --cty-radius-lg:       12px;
    --cty-max:             1100px;
}

body.cty-translation-page {
    background-color: var(--cty-bg-page);
    font-family: var(--cty-font);
    color: var(--cty-text-dark);
    min-height: 100vh;
}

/* ============================================================
   PAGE OUTER WRAPPER
   ============================================================ */

.cty-page-wrap {
    width: 100%;
    padding-bottom: 100px;
    overflow-x: hidden;
}

/* ============================================================
   BREADCRUMB
   FIX: margin-top moved here from .cty-hero so the hero sits
        flush beneath the breadcrumb with zero gap.
   ============================================================ */

.cty-breadcrumb {
    margin-top: 80px;        /* clears the fixed/sticky header */
    margin-bottom: 0;        /* no gap between breadcrumb and hero */
    padding: 0.5rem 0;       /* small breathing room for the text */
    background: transparent;
}

.cty-breadcrumb-list {
    list-style: none;
    margin: 0;               /* reset browser default ol margin */
    padding: 0;              /* reset browser default ol padding-left */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: var(--cty-fs-xs);
    color: var(--cty-text-muted);
    line-height: 1.4;
}

.cty-breadcrumb-item,
.cty-breadcrumb-sep {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

.cty-breadcrumb-link {
    color: var(--cty-accent);
    text-decoration: none;
    font-weight: var(--cty-fw-medium);
}

.cty-breadcrumb-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cty-breadcrumb-sep {
    color: var(--cty-text-muted);
    user-select: none;
}

.cty-breadcrumb-current {
    color: var(--cty-text-muted);
    font-weight: var(--cty-fw-regular);
}

/* ============================================================
   HERO
   FIX: margin-top changed from 80px → 0.
        Header clearance is now handled by .cty-breadcrumb above.
   ============================================================ */

.cty-hero {
    background-color: var(--cty-primary);
    display: grid;
    grid-template-columns: 1fr 400px;
    min-height: 500px;
    margin-top: 0;           /* was 80px — moved to .cty-breadcrumb */
    border-radius: var(--cty-radius-lg);
    overflow: hidden;
}

.cty-hero-left {
    padding: 3.5rem 3rem 3.5rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.125rem;
}

.cty-hero h1 {
    font-size: var(--cty-fs-hero);
    font-weight: var(--cty-fw-bold);
    color: #ffffff;
    line-height: 1.15;
    margin: 0;
    text-align: left;
}

.cty-hero-subtitle {
    font-size: var(--cty-fs-lg);
    font-weight: var(--cty-fw-regular);
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.65;
    max-width: 500px;
    margin: 0;
    text-align: left;
}

.cty-hero-pills {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cty-hero-pill {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--cty-fs-xs);
    font-weight: var(--cty-fw-medium);
    padding: 0.3rem 0.75rem;
    border-radius: 100px;
}

.cty-hero-cta {
    display: inline-block;
    background: #ffffff;
    color: var(--cty-primary);
    font-size: var(--cty-fs-md);
    font-weight: var(--cty-fw-bold);
    padding: 0.9rem 2.25rem;
    border-radius: var(--cty-radius);
    text-decoration: none;
    width: fit-content;
    margin-top: 0.75rem;
    transition: background-color 200ms ease, transform 200ms ease;
}

.cty-hero-cta:hover {
    background: var(--cty-bg-white-hover);
    transform: translateY(-2px);
}

.cty-hero-img-col {
    overflow: hidden;
    position: relative;
    min-height: 500px;
}

.cty-hero-img-col img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* ============================================================
   STATS ROW
   ============================================================ */

.cty-stats-row {
    display: flex;
    background: var(--cty-bg-white);
    border-bottom: 1px solid var(--cty-border);
}

.cty-stat-item {
    flex: 1;
    padding: 1.5rem 1rem;
    text-align: center;
    border-right: 1px solid var(--cty-border);
}

.cty-stat-item:last-child {
    border-right: none;
}

.cty-stat-num {
    display: block;
    font-size: var(--cty-fs-3xl);
    font-weight: var(--cty-fw-bold);
    color: var(--cty-primary);
    line-height: 1;
    margin-bottom: 0.375rem;
}

.cty-stat-label {
    font-size: var(--cty-fs-xs);
    font-weight: var(--cty-fw-medium);
    color: var(--cty-text-muted);
    line-height: 1.4;
}

/* ============================================================
   MAIN WRAPPER
   ============================================================ */

.cty-wrapper {
    max-width: var(--cty-max);
    margin: 0 auto;
    padding: 0 2rem 8rem;
}

/* ============================================================
   SECTION BASE
   ============================================================ */

.cty-section {
    background: var(--cty-bg-white);
    border: 1px solid var(--cty-border);
    border-radius: var(--cty-radius-lg);
    padding: 2.25rem;
    margin-top: 1.5rem;
}

.cty-section-alt {
    background: var(--cty-bg-light);
}

.cty-section-title {
    font-size: var(--cty-fs-2xl);
    font-weight: var(--cty-fw-bold);
    color: var(--cty-primary);
    margin-bottom: 1.25rem;
    line-height: 1.25;
}

.cty-section-intro {
    font-size: var(--cty-fs-lg);
    color: var(--cty-text-body);
    line-height: 1.7;
    margin-bottom: 1.75rem;
}

.cty-body-text {
    font-size: var(--cty-fs-base);
    color: var(--cty-text-body);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.cty-body-text:last-child {
    margin-bottom: 0;
}

/* ============================================================
   DOCUMENT CARDS - 2 COLUMN GRID
   ============================================================ */

.cty-doc-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.cty-doc-card {
    background: var(--cty-bg-white);
    border: 1px solid var(--cty-border);
    border-radius: var(--cty-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 200ms ease, transform 200ms ease;
}

.cty-doc-card:hover {
    border-color: var(--cty-accent);
    transform: translateY(-2px);
}

.cty-doc-card-img-wrap {
    overflow: hidden;
    height: 200px;
    flex-shrink: 0;
}

.cty-doc-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.cty-doc-card-body {
    padding: 1.25rem 1.375rem 1.375rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    flex: 1;
}

.cty-doc-card-name {
    font-size: var(--cty-fs-lg);
    font-weight: var(--cty-fw-bold);
    color: var(--cty-primary);
    line-height: 1.25;
    margin: 0;
}

.cty-card-title-link {
    color: var(--cty-primary);
    text-decoration: none;
}

.cty-card-title-link:hover {
    color: var(--cty-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cty-doc-card-desc {
    font-size: var(--cty-fs-base);
    color: var(--cty-text-body);
    line-height: 1.7;
    margin: 0;
}

.cty-doc-card-auth {
    font-size: var(--cty-fs-xs);
    font-weight: var(--cty-fw-semibold);
    color: var(--cty-accent);
    padding-top: 0.625rem;
    border-top: 1px solid var(--cty-border-soft);
    margin-top: auto;
}

.cty-doc-card-cta {
    display: inline-block;
    background: var(--cty-primary);
    color: #ffffff;
    font-size: var(--cty-fs-base);
    font-weight: var(--cty-fw-bold);
    padding: 0.7rem 1.375rem;
    border-radius: var(--cty-radius);
    text-decoration: none;
    width: fit-content;
    transition: background-color 200ms ease, transform 200ms ease;
}

.cty-doc-card-cta:hover {
    background: var(--cty-primary-hover);
    transform: translateY(-1px);
}

/* ============================================================
   WHAT IS - 2 col grid (content | image)
   ============================================================ */

.cty-what-is-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem 2rem;
    align-items: start;
}

.cty-doc-img {
    width: 100%;
    height: auto;
    border-radius: var(--cty-radius);
    border: 1px solid var(--cty-border);
    display: block;
}

/* ============================================================
   WHO NEEDS TABLE
   ============================================================ */

.cty-table-wrap {
    overflow-x: auto;
    border-radius: var(--cty-radius);
    border: 1px solid var(--cty-border);
}

.cty-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--cty-fs-base);
}

.cty-table thead tr {
    background: var(--cty-primary);
}

.cty-table th {
    padding: 0.875rem 1.125rem;
    color: #ffffff;
    font-weight: var(--cty-fw-semibold);
    text-align: left;
    font-size: var(--cty-fs-base);
}

.cty-table td {
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid var(--cty-border);
    color: var(--cty-text-body);
    line-height: 1.5;
    vertical-align: top;
}

.cty-table tr:nth-child(even) td {
    background: var(--cty-bg-alt);
}

.cty-table tr:last-child td {
    border-bottom: none;
}

.cty-table td strong {
    font-weight: var(--cty-fw-semibold);
    color: var(--cty-primary);
}

/* ============================================================
   WHY CHOOSE - 2 COL CHECKLIST
   ============================================================ */

.cty-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 0.25rem;
}

.cty-why-item {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
}

.cty-why-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: var(--cty-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.15rem;
}

.cty-why-text {
    font-size: var(--cty-fs-base);
    color: var(--cty-text-body);
    line-height: 1.65;
}

.cty-why-text strong {
    font-weight: var(--cty-fw-semibold);
    color: var(--cty-primary);
    display: block;
    margin-bottom: 0.2rem;
}

/* ============================================================
   PROCESS - HORIZONTAL CONNECTED STEPS
   ============================================================ */

.cty-proc-row {
    display: flex;
    align-items: flex-start;
    margin-top: 0.75rem;
}

.cty-proc-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cty-proc-num {
    width: 44px;
    height: 44px;
    background: var(--cty-primary);
    color: #ffffff;
    border-radius: 50%;
    font-size: var(--cty-fs-md);
    font-weight: var(--cty-fw-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cty-proc-connector {
    flex: 1;
    height: 2px;
    background: var(--cty-border);
    margin-top: 21px;
}

.cty-proc-title {
    font-size: var(--cty-fs-base);
    font-weight: var(--cty-fw-semibold);
    color: var(--cty-primary);
    margin: 0.25rem 0 0 0;
}

.cty-proc-desc {
    font-size: var(--cty-fs-xs);
    color: var(--cty-text-muted);
    line-height: 1.5;
    margin: 0.125rem 0 0 0;
    padding: 0 0.5rem;
}

/* ============================================================
   PRICING BOX
   ============================================================ */

.cty-pricing-box {
    background: var(--cty-bg-light);
    border: 2px solid var(--cty-accent);
    border-radius: var(--cty-radius-lg);
    padding: 1.125rem 1.5rem;
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.cty-price-num {
    font-size: var(--cty-fs-4xl);
    font-weight: var(--cty-fw-bold);
    color: var(--cty-primary);
    line-height: 1;
    margin: 0;
}

.cty-price-unit {
    font-size: var(--cty-fs-lg);
    font-weight: var(--cty-fw-regular);
    color: var(--cty-accent);
}

.cty-price-sub {
    font-size: var(--cty-fs-base);
    color: var(--cty-accent);
    margin: 0.5rem 0 0 0;
}

.cty-btn-primary {
    display: inline-block;
    background: var(--cty-primary);
    color: #ffffff;
    font-size: var(--cty-fs-md);
    font-weight: var(--cty-fw-bold);
    padding: 0.9rem 2.25rem;
    border-radius: var(--cty-radius);
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 200ms ease, transform 200ms ease;
}

.cty-btn-primary:hover {
    background: var(--cty-primary-hover);
    transform: translateY(-2px);
}

/* ============================================================
   RELATED SERVICES - 5 COLUMN GRID
   ============================================================ */

.cty-related-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.875rem;
    margin-top: 0.25rem;
}

.cty-related-card {
    background: var(--cty-bg-page);
    border: 1px solid var(--cty-border-soft);
    border-radius: var(--cty-radius);
    padding: 1rem 1.125rem;
    text-decoration: none;
    display: block;
    transition: border-color 200ms ease, background-color 200ms ease;
}

.cty-related-card:hover {
    border-color: var(--cty-accent);
    background: var(--cty-bg-light);
}

.cty-related-card-name {
    font-size: var(--cty-fs-base);
    font-weight: var(--cty-fw-semibold);
    color: var(--cty-primary);
    margin-bottom: 0.375rem;
    line-height: 1.3;
}

.cty-related-card-desc {
    font-size: var(--cty-fs-xs);
    color: var(--cty-text-muted);
    line-height: 1.55;
    margin: 0;
}

/* ============================================================
   INTERNAL LINKS
   ============================================================ */

.cty-internal-link {
    color: var(--cty-accent);
    font-weight: var(--cty-fw-medium);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cty-internal-link:hover {
    color: var(--cty-primary);
    text-decoration: none;
}

/* ============================================================
   FAQ - ACCORDION (button+aria pattern)
   Structure: div.cty-faq-card > h3.cty-faq-q > button[aria-expanded]
              + div.cty-faq-a[aria-hidden]
   ============================================================ */

.cty-faq-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.cty-faq-card {
    border: 1px solid var(--cty-border-soft);
    border-radius: var(--cty-radius);
    overflow: hidden;
    transition: border-color 200ms ease;
}

.cty-faq-card:has(button[aria-expanded="true"]) {
    border-color: var(--cty-accent);
}

.cty-faq-q {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
}

.cty-faq-q button {
    background: none;
    border: none;
    padding: 1rem 1.125rem;
    margin: 0;
    font-size: var(--cty-fs-base);
    font-weight: var(--cty-fw-semibold);
    color: var(--cty-text-dark);
    cursor: pointer;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    text-align: left;
    line-height: 1.45;
    user-select: none;
}

.cty-faq-q button:focus-visible {
    outline: 2px solid var(--cty-accent);
    outline-offset: -2px;
}

.cty-faq-toggle {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 1px solid var(--cty-border-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: var(--cty-fw-regular);
    color: var(--cty-text-muted);
    line-height: 1;
    transition: border-color 200ms ease, color 200ms ease;
    margin-top: 0.05rem;
    pointer-events: none;
}

.cty-faq-toggle::after {
    content: '+';
}

button[aria-expanded="true"] .cty-faq-toggle::after {
    content: '\2212';
}

button[aria-expanded="true"] .cty-faq-toggle {
    border-color: var(--cty-accent);
    color: var(--cty-accent);
}

.cty-faq-a[aria-hidden="true"] {
    display: none;
}

.cty-faq-a[aria-hidden="false"] {
    display: block;
}

.cty-faq-a {
    font-size: var(--cty-fs-base);
    color: var(--cty-text-body);
    line-height: 1.75;
    padding: 0 1.125rem 1rem;
}

.cty-faq-a a {
    color: var(--cty-accent);
    font-weight: var(--cty-fw-medium);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cty-faq-a a:hover {
    color: var(--cty-primary);
    text-decoration: none;
}

/* ============================================================
   FINAL CTA
   ============================================================ */

.cty-final-cta {
    background: var(--cty-primary);
    border-radius: var(--cty-radius-lg);
    padding: 3rem 2.5rem;
    text-align: center;
    margin-top: 1.5rem;
}

.cty-final-cta h2 {
    font-size: var(--cty-fs-3xl);
    font-weight: var(--cty-fw-bold);
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.cty-final-cta p {
    font-size: var(--cty-fs-lg);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.65;
    margin-bottom: 1.75rem;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

.cty-btn-white {
    display: inline-block;
    background: #ffffff;
    color: var(--cty-primary);
    font-size: var(--cty-fs-md);
    font-weight: var(--cty-fw-bold);
    padding: 0.9rem 2.5rem;
    border-radius: var(--cty-radius);
    text-decoration: none;
    transition: background-color 200ms ease, transform 200ms ease;
}

.cty-btn-white:hover {
    background: var(--cty-bg-white-hover);
    transform: translateY(-2px);
}

@media (max-width: 1023px) {
    .cty-hero {
            grid-template-columns: 1fr 300px;
            min-height: 420px;
        }
    .cty-hero h1 {
            font-size: var(--cty-fs-4xl);
        }
    .cty-hero-left {
            padding: 2.5rem 2rem 2.5rem 2.5rem;
        }
    .cty-what-is-grid {
            grid-template-columns: 1fr 240px;
        }
    .cty-related-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    .cty-wrapper {
            padding: 0 1.5rem 6rem;
        }
}

@media (max-width: 767px) {
    .cty-wrapper {
            padding: 0 1rem 6rem;
        }
    .cty-breadcrumb {
            margin-top: 70px;    /* matches mobile header height */
        }
    .cty-hero {
            grid-template-columns: 1fr;
            min-height: auto;
            margin-top: 0;       /* was 70px — moved to .cty-breadcrumb above */
            border-radius: 0 0 var(--cty-radius) var(--cty-radius);
        }
    .cty-hero-left {
            padding: 2rem 1.25rem;
        }
    .cty-hero h1 {
            font-size: var(--cty-fs-3xl);
        }
    .cty-hero-subtitle {
            font-size: var(--cty-fs-base);
        }
    .cty-hero-img-col {
            height: 280px;
            order: -1;
        }
    .cty-stats-row {
            flex-wrap: wrap;
        }
    .cty-stat-item {
            flex: 1 1 50%;
            border-bottom: 1px solid var(--cty-border);
        }
    .cty-stat-item:nth-child(odd) {
            border-right: 1px solid var(--cty-border);
        }
    .cty-stat-item:nth-child(even) {
            border-right: none;
        }
    .cty-stat-item:nth-last-child(-n+2) {
            border-bottom: none;
        }
    .cty-section {
            padding: 1.5rem 1.25rem;
        }
    .cty-section-title {
            font-size: var(--cty-fs-xl);
        }
    .cty-section-intro {
            font-size: var(--cty-fs-base);
            margin-bottom: 1.25rem;
        }
    .cty-doc-cards {
            grid-template-columns: 1fr;
        }
    .cty-doc-card-img-wrap {
            height: 220px;
        }
    .cty-what-is-grid {
            grid-template-columns: 1fr;
        }
    .cty-doc-img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            object-position: center top;
        }
    .cty-table {
            table-layout: fixed;
        }
    .cty-table th:nth-child(1),
        .cty-table td:nth-child(1) {
            width: 28%;
        }
    .cty-table th:nth-child(2),
        .cty-table td:nth-child(2) {
            width: 30%;
        }
    .cty-table th:nth-child(3),
        .cty-table td:nth-child(3) {
            width: 42%;
        }
    .cty-why-grid {
            grid-template-columns: 1fr;
        }
    .cty-proc-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
        }
    .cty-proc-step {
            flex-direction: row;
            text-align: left;
            align-items: flex-start;
            gap: 1rem;
            width: 100%;
        }
    .cty-proc-connector {
            display: none;
        }
    .cty-proc-title {
            margin-top: 0;
            font-size: var(--cty-fs-base);
        }
    .cty-proc-desc {
            padding: 0;
            font-size: var(--cty-fs-xs);
        }
    .cty-pricing-box {
            flex-direction: column;
            align-items: flex-start;
            padding: 1.25rem;
        }
    .cty-related-grid {
            grid-template-columns: 1fr 1fr;
        }
    .cty-final-cta {
            padding: 2rem 1.25rem;
        }
    .cty-final-cta h2 {
            font-size: var(--cty-fs-2xl);
        }
    .cty-final-cta p {
            font-size: var(--cty-fs-base);
        }
    .cty-table th,
        .cty-table td {
            padding: 0.75rem 0.875rem;
            font-size: var(--cty-fs-xs);
        }
}

@media (max-width: 480px) {
    .cty-hero h1 {
            font-size: var(--cty-fs-2xl);
        }
    .cty-hero-cta {
            margin-top: 0;
        }
    .cty-hero-cta,
        .cty-btn-primary,
        .cty-btn-white {
            display: block;
            text-align: center;
        }
    .cty-pricing-box .cty-btn-primary {
            width: 100%;
            text-align: center;
        }
    .cty-related-grid {
            grid-template-columns: 1fr;
        }
    .cty-doc-card-cta {
            display: block;
            text-align: center;
        }
}

@media (prefers-reduced-motion: reduce) {
    .cty-hero-cta,
        .cty-btn-primary,
        .cty-btn-white,
        .cty-doc-card,
        .cty-faq-card {
            transition: none;
        }
}

/* ===== TL;DR summary box (matches USCIS) ===== */

.cty-tldr-wrap { padding: 2.25rem 0 0; display: flex; flex-direction: column; gap: 1.25rem; }

.cty-tldr { border: 3px dashed var(--cty-accent); border-radius: var(--cty-radius-lg); background: var(--cty-bg-light); padding: 1.25rem 1.5rem; display: flex; align-items: flex-start; gap: 1rem; }

.cty-tldr-label { flex-shrink: 0; background: var(--cty-accent); color: #ffffff; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; padding: 0.3rem 0.6rem; border-radius: 6px; line-height: 1; text-transform: uppercase; margin-top: 0.15rem; }

.cty-tldr p { margin: 0; color: var(--cty-text-body); font-size: 0.9375rem; line-height: 1.65; }

/* ===== Shared author/reviewer byline (pts-byline) ===== */

.pts-byline { background:#ffffff; border:1px solid #e2e8f0; border-radius:12px; padding:0.875rem 1rem; margin:1.25rem 0 1.75rem; }

.pts-byline-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }

.pts-byline-grid.pts-byline-single { grid-template-columns:1fr; max-width:340px; }

@media (max-width:600px) {
    .pts-byline-grid { grid-template-columns:1fr; gap:0.875rem; }
}

.pts-byline-person { display:flex; align-items:center; gap:0.875rem; min-width:0; }

.pts-byline-photo { width:56px; height:56px; aspect-ratio:1; border-radius:50%; object-fit:cover; flex-shrink:0; outline:2px solid #bee3f8; outline-offset:-2px; }

@media (max-width:600px) {
    .pts-byline-photo { width:48px; height:48px; }
}

.pts-byline-info { display:flex; flex-direction:column; gap:0.15rem; min-width:0; }

.pts-byline-label { font-size:0.75rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#4a5568; }

.pts-byline-name { color:#1a365d; font-size:1.0625rem; font-weight:700; text-decoration:none; line-height:1.25; }

.pts-byline-name:hover, .pts-byline-name:focus-visible { color:#1a56a0; text-decoration:underline; }

@media (max-width:600px) {
    .pts-byline-name { font-size:0.9375rem; }
}

.pts-byline-role { color:#4a5568; font-size:0.8125rem; line-height:1.4; }

.pts-byline-links { font-size:0.8125rem; margin-top:0.15rem; }

.pts-byline-links a { color:#1a56a0; font-weight:600; text-decoration:none; }

.pts-byline-links a:hover, .pts-byline-links a:focus-visible { text-decoration:underline; }

.pts-byline-review-icon { color:#1a56a0; font-weight:700; }

.pts-byline-meta { border-top:1px solid #e2e8f0; margin-top:0.875rem; padding-top:0.75rem; font-size:0.8125rem; color:#4a5568; }

/* ===== FAQ answer paragraphs/lists (added for split answers) ===== */

.cty-faq-a p { margin: 0 0 0.75rem; }

.cty-faq-a p:last-child { margin-bottom: 0; }

.cty-faq-a ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }

.cty-faq-a li { margin-bottom: 0.4rem; }