:root {
    --primary-blue: #0052CC;
    --accent-purple: #0052CC;
    --primary: #0052CC;
    --navy: #0B2E5E;
    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;
    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --text-tertiary: #9CA3AF;
    --border: #E5E7EB;
    --bg-soft: #F9FAFB;
    --bg-page: #ffffff;

    /* Aliases: several stylesheets (dashboard.css etc.) reference these
       names directly, but they were never actually defined anywhere in
       the project -- only the names above were. An undefined var() with
       no fallback resolves to the inherited/initial value instead of
       erroring, so the effect was invisible (e.g. white-on-white) or
       wrong-colored text rather than a visible failure. Aliased instead
       of hardcoded so dark mode below still applies correctly. */
    --dark-gray: var(--text-primary);
    --text-gray: var(--text-secondary);
    --border-color: var(--border);
    --light-gray: var(--bg-soft);
    --success-green: var(--success);
    --error-red: var(--error);
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #3b82f6;
        --success: #10b981;
        --warning: #fb923c;
        --error: #f87171;
        --text-primary: #f1f5f9;
        --text-secondary: #cbd5e1;
        --text-tertiary: #78829f;
        --border: #1e293b;
        --bg-soft: #0f172a;
        --bg-page: #1a202c;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
    line-height: 1.5;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

.app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.navbar {
    background: var(--primary);
    color: white;
    padding: 11px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar-brand {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
}

/* Keep the brand link visually consistent with the navigation bar. */
.navbar-brand a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 40px;
    transition: opacity 0.2s ease;
}

.navbar-brand a img {
    height: 40px;
    width: auto;
    display: block;
    max-width: 180px;
}

.navbar-brand a:hover,
.navbar-brand a:focus {
    color: inherit;
    text-decoration: none;
    opacity: 0.85;
}

.navbar-menu {
    display: flex;
    gap: 20px;
}

.nav-link {
    color: white;
    text-decoration: none;
    font-size: 14px;
    transition: opacity 0.2s ease;
}

.nav-link:hover {
    opacity: 0.8;
}

.container {
    flex: 1;
    padding: 40px 32px;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

/* Full width when signing -- .container is a direct child of the
   already full-bleed .app, so simply dropping its own max-width/margin
   constraint is sufficient; no viewport-breakout negative-margin trick
   needed (an earlier version of this stacked one on top anyway, which
   fought this rule and pushed .signing-layout's children out of their
   intended position). */
.container:has(.signing-layout.signing-active) {
    max-width: 100%;
    padding: 16px;
    margin: 0;
    width: 100%;
}

/* Full viewport height for signing, desktop only -- pins .app to exactly
   100vh so the signing layout can fill "the rest of the screen" below
   the navbar without guessing the navbar's own height, and only the two
   inner panels (steps column / document preview) scroll internally, not
   the page. Scoped to the same >=1300px breakpoint sign.html uses for
   the side-by-side layout; below that, stacked content scrolls normally. */
@media (min-width: 1300px) {
    .app:has(.signing-layout.signing-active) {
        height: 100vh;
        overflow: hidden;
    }

    .app:has(.signing-layout.signing-active) .container {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    .signing-layout.signing-active {
        height: 100%;
        min-height: 0;
    }
}

.screen {
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.screen-header {
    padding: 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 12px;
    align-items: center;
}

.screen-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--primary);
    color: white;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.screen-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
}

.screen-body {
    padding: 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.field {
    margin-bottom: 20px;
}

.field:last-child {
    margin-bottom: 0;
}

.field-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="file"],
textarea,
select {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 16px;
    font-family: inherit;
    background: var(--bg-soft);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="file"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg-page);
    box-shadow: 0 0 0 2px rgba(0,82,163,0.1);
}

textarea {
    resize: vertical;
    min-height: 100px;
}

.preview-box {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 32px 20px;
    margin: 16px 0;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 15px;
    position: relative;
}

.document-page-preview { position: relative; width: 100%; background: #fff; text-align: center; overflow: visible; display: block; margin: 0 auto; }
.document-pages-preview { max-height: 620px; overflow-y: auto; padding: 10px; background: #e5e7eb; }
.document-pages-preview .document-page-preview + .document-page-preview { margin-top: 12px; }
/* No max-height/object-fit here -- the image must always render at
   exactly the container's width with no letterboxing/centering, in
   every state (including before .signing-active is applied, since the
   fields' left/top/width/height % are calculated against this image's
   rendered box at the moment they're created in loadReviewDocument()). */
.document-page-preview img { display: block; width: 100%; height: auto; margin: 0; }

/* Document preview during signing - clean, minimal styling.
   #document-preview (sign.html inline styles) owns the scrollbar; this
   is a plain block that just grows to its natural content height. */
.signing-layout.signing-active .document-pages-preview {
    width: 100%;
    padding: 16px;
    background: #f3f4f6;
}

.signing-layout.signing-active .document-page-preview {
    background: #ffffff;
    margin: 0 0 12px 0;
    text-align: center;
    display: block;
}

.signing-layout.signing-active .document-page-preview img {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
}
.document-page-label { position: absolute; right: 8px; top: 8px; padding: 3px 7px; border-radius: 4px; background: rgba(15,23,42,.75); color: #fff; font-size: 11px; }
.document-signature-field { position: absolute; box-sizing: border-box; border: 2px solid #f97316; background: rgba(255,237,213,.78); color: #c2410c; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; cursor: pointer; }
.document-signature-field:hover, .document-signature-field:focus { background: rgba(254,215,170,.92); outline: 3px solid rgba(249,115,22,.25); }
/* A field that already has its captured value rendered into it (see
   updateFieldPreviewOverlays() in sign.js) -- green instead of the
   orange "still needs input" state, matching that reused elsewhere in
   the app for completed/signed status. */
.document-signature-field-filled { border-color: #16a34a; background: rgba(220,252,231,.85); }

.signature-marker {
    border: 2px dashed var(--warning);
    background: rgba(234,88,12,0.04);
    color: var(--warning);
    padding: 14px;
    border-radius: 6px;
    margin: 12px 0;
    font-size: 14px;
    font-weight: 500;
}

.alert {
    background: rgba(0,82,163,0.05);
    border: 1px solid rgba(0,82,163,0.2);
    border-radius: 6px;
    padding: 14px 16px;
    margin: 16px 0;
    font-size: 15px;
    color: var(--text-secondary);
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.alert.error {
    background: rgba(220,38,38,0.05);
    border-color: rgba(220,38,38,0.2);
    color: #dc2626;
}

.alert.success {
    background: rgba(5,150,105,0.05);
    border-color: rgba(5,150,105,0.2);
    color: #059669;
}

.actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

button {
    flex: 1;
    padding: 11px 18px;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
}

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

.btn-primary:hover {
    background: #0052a3;
    box-shadow: 0 4px 12px rgba(0,82,163,0.25);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    background: white;
    color: var(--primary-blue);
    border: 2px solid white;
    font-weight: 700;
    padding: 0.625rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: #f0f4f8;
    border-color: white;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.btn-small {
    flex: none;
    padding: 8px 12px;
    font-size: 12px;
}

.divider {
    height: 1px;
    background: var(--border);
    margin: 20px 0;
}

.checkbox-item {
    display: flex;
    gap: 10px;
    margin: 14px 0;
    align-items: flex-start;
}

.checkbox-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--primary);
    flex-shrink: 0;
    cursor: pointer;
}

.checkbox-label {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
    text-transform: none;
    font-weight: 400;
    cursor: pointer;
}

.success-message {
    background: rgba(5,150,105,0.08);
    border: 1px solid rgba(5,150,105,0.2);
    border-radius: 6px;
    padding: 20px;
    text-align: center;
    margin: 20px 0;
}

.success-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.success-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--success);
    margin-bottom: 4px;
}

.success-text {
    font-size: 15px;
    color: var(--text-secondary);
}

.details-list {
    font-size: 15px;
    margin: 16px 0;
}

.detail-row {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    color: var(--text-tertiary);
    font-weight: 500;
    width: 40%;
    flex-shrink: 0;
}

.detail-value {
    color: var(--text-primary);
    font-weight: 500;
}

.timeline {
    font-size: 14px;
}

.timeline-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-left: 2px solid var(--border);
    padding-left: 12px;
    margin-left: 0;
}

.timeline-item.success {
    border-left-color: var(--success);
}

.timeline-time {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    font-size: 14px;
}

.timeline-text {
    color: var(--text-secondary);
    font-size: 14px;
}

.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
}

.list-item:last-child {
    border-bottom: none;
}

.list-item-title {
    font-weight: 500;
    color: var(--text-primary);
}

.list-item-meta {
    font-size: 14px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.badge-pending {
    background: rgba(234,88,12,0.1);
    color: var(--warning);
}

.badge-signed {
    background: rgba(5,150,105,0.1);
    color: var(--success);
}

.loading {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

.error-message {
    color: #dc2626;
    font-size: 14px;
    margin-top: 8px;
}

@media (max-width: 768px) {
    .container {
        padding: 24px 16px;
    }

    .navbar {
        padding: 12px 16px;
        flex-direction: column;
        gap: 12px;
    }

    .screen-body {
        padding: 20px;
    }

    .actions {
        flex-direction: column;
    }

    button {
        width: 100%;
    }

    .detail-label {
        width: 100%;
        margin-bottom: 4px;
    }

    .detail-row {
        flex-direction: column;
    }
}

/* Professional Landing Page Styles */

.navbar-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.logo {
    width: 40px;
    height: 40px;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    flex: 1;
    margin: 0 2rem;
}

.nav-item {
    position: relative;
}

.nav-link {
    background: none;
    border: none;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0.5rem 0;
}

.nav-link:hover {
    color: #e0e7ff;
    opacity: 0.9;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 220px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    margin-top: 0.5rem;
    padding: 0.5rem 0;
    z-index: 1001;
}

.nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--text-primary);
    transition: all 0.3s ease;
    text-decoration: none;
}

.dropdown-item:hover {
    background-color: var(--bg-soft);
    color: var(--primary-blue);
    padding-left: 2rem;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    gap: 6px;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background: white;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translateY(11px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translateY(-11px);
}

@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }
}

.nav-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.btn-primary-large {
    padding: 0.75rem 1.5rem;
    background-color: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-primary-large:hover {
    background-color: #0840a6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(11, 83, 148, 0.3);
}

/* Hero Section */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 6rem 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.hero-cta {
    margin-top: 3rem;
}

.email-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.email-input {
    flex: 1;
    padding: 0.875rem 1rem;
    border: 2px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.email-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(11, 83, 148, 0.1);
}

.form-note {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-preview {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
    background: linear-gradient(135deg, var(--bg-soft) 0%, #ffffff 100%);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Features Section */
.features {
    padding: 6rem 20px;
    background-color: var(--bg-soft);
}

.features h2 {
    text-align: center;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.feature-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    text-align: center;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-card h3 {
    margin-bottom: 0.75rem;
}

.feature-card p {
    color: var(--text-secondary);
}

/* How It Works Section */
.how-it-works {
    padding: 6rem 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.how-it-works h2 {
    text-align: center;
}

.steps-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    align-items: center;
    margin-top: 3rem;
    row-gap: 3rem;
}

.step {
    text-align: center;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--primary-blue);
    color: white;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.step h3 {
    margin-bottom: 0.5rem;
}

.step-arrow {
    font-size: 2rem;
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pricing Section */
.pricing {
    padding: 6rem 20px;
    background-color: var(--bg-soft);
}

.pricing h2 {
    text-align: center;
}

.pricing-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    text-align: center;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-card {
    background: white;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.pricing-card.featured {
    border: 2px solid var(--primary-blue);
    transform: scale(1.05);
}

.pricing-card.featured:hover {
    box-shadow: 0 12px 36px rgba(11, 83, 148, 0.2);
}

.badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-purple);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin: 1.5rem 0;
}

.price span {
    font-size: 1rem;
    color: var(--text-secondary);
}

.features-list {
    list-style: none;
    text-align: left;
    margin: 2rem 0;
    padding: 2rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.features-list li {
    padding: 0.75rem 0;
    color: var(--text-secondary);
}

.pricing-card a {
    display: block;
    margin-top: 1.5rem;
}

/* CTA Section */
.cta-section {
    padding: 6rem 20px;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-purple) 100%);
    color: white;
    text-align: center;
}

.cta-section h2 {
    color: white;
    font-size: 2.5rem;
}

.cta-section p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

/* Footer */
.footer {
    background-color: #1a1a1a;
    color: white;
    padding: 4rem 20px 2rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.footer-section h4 {
    color: white;
    margin-bottom: 1rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.75rem;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-section a:hover {
    color: white;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.social-links {
    display: flex;
    gap: 1.5rem;
}

.social-links a {
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-links a:hover {
    color: white;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .pricing-card.featured {
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    .navbar-container {
        height: auto;
        padding: 1rem 20px;
    }

    .nav-menu {
        flex-direction: column;
        gap: 0;
        margin: 0;
        display: none;
    }

    .nav-menu.active {
        display: flex;
    }

    .hero {
        padding: 3rem 20px;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .email-form {
        flex-direction: column;
    }

    .features {
        padding: 3rem 20px;
    }

    .pricing {
        padding: 3rem 20px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1.5rem;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }
}