@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
    --site-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --site-monospace-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    /*
     * Compact modular ramp. The 1.125 ratio is rounded to the nearest usable
     * pixel so dense directory, account and administration screens stay crisp.
     */
    --type-ratio: 1.125;
    --type-step-minus-2: 0.625rem; /* 10px */
    --type-step-minus-1: 0.6875rem; /* 11px */
    --type-step-0: 0.75rem; /* 12px */
    --type-step-1: 0.8125rem; /* 13px */
    --type-step-2: 0.875rem; /* 14px */
    --type-step-3: 0.9375rem; /* 15px */
    --type-step-4: 1rem; /* 16px */
    --type-step-5: 1.125rem; /* 18px */
    --type-step-6: 1.25rem; /* 20px */
    --type-step-7: 1.375rem; /* 22px */
    --type-step-8: 1.5rem; /* 24px */

    /* Backward-compatible aliases used by legacy styles and Blade surfaces. */
    --text-xs: var(--type-step-0);
    --text-sm: var(--type-step-2);
    --text-base: 1rem;
    --text-lg: var(--type-step-5);
    --text-xl: var(--type-step-6);
    --text-2xl: var(--type-step-7);
    --text-3xl: var(--type-step-8);
    --text-4xl: 1.6875rem;
    --text-5xl: 1.875rem;

    /* Compact heading hierarchy with explicit context variants below. */
    --heading-1-size: var(--type-step-7);
    --heading-1-line-height: 1.2728;
    --heading-2-size: var(--type-step-5);
    --heading-2-line-height: 1.3334;
    --heading-3-size: var(--type-step-4);
    --heading-3-line-height: 1.375;
    --heading-4-size: var(--type-step-3);
    --heading-4-line-height: 1.4;
    --heading-5-size: var(--type-step-2);
    --heading-5-line-height: 1.4286;
    --heading-6-size: var(--type-step-1);
    --heading-6-line-height: 1.3847;
    --heading-category-size: var(--type-step-1);
    --heading-category-line-height: 1.3847;

    /* Semantic roles keep public, account, and admin interfaces consistent. */
    --type-caption-size: var(--type-step-minus-1);
    --type-caption-line-height: 1.3334;
    --type-meta-size: var(--type-step-0);
    --type-meta-line-height: 1.5;
    --type-ui-size: var(--type-step-0);
    --type-ui-line-height: 1.5;
    --type-body-size: var(--type-step-1);
    --type-body-line-height: 1.5385;
    --type-control-size: var(--type-step-1);
    --type-control-line-height: 1.5385;
    --type-reading-size: var(--type-step-2);
    --type-reading-line-height: 1.4286;
    --type-title-size: var(--heading-1-size);
    --type-title-line-height: var(--heading-1-line-height);
    --type-section-size: var(--heading-2-size);
    --type-section-line-height: var(--heading-2-line-height);
    --type-subheading-size: var(--heading-3-size);
    --type-subheading-line-height: var(--heading-3-line-height);

    --site-font-size: var(--type-body-size);
    --site-line-height: var(--type-body-line-height);
    --site-heading-line-height: var(--type-title-line-height);

    /* A 2px/4px rhythm keeps spacing predictable without making UI oversized. */
    --space-0: 0;
    --space-1: 0.125rem;
    --space-2: 0.25rem;
    --space-3: 0.375rem;
    --space-4: 0.5rem;
    --space-5: 0.75rem;
    --space-6: 1rem;
    --space-7: 1.25rem;
    --space-8: 1.5rem;
    --space-9: 2rem;

    --control-height-compact: 1.875rem;
    --control-height-default: 2.125rem;
    --control-height-comfortable: 2.375rem;
    --control-height-touch: 2.75rem;
    --control-padding-inline: var(--space-5);
    --control-padding-block: var(--space-3);
    --table-cell-padding-inline: var(--space-5);
    --table-cell-padding-block: 0.4375rem;
    --content-measure-reading: 68ch;
    --content-measure-form: 46rem;
    --content-measure-wide: 61.1875rem;
    --heading-letter-spacing: -0.012em;
    --label-letter-spacing: 0.005em;

    /* Shared contrast tokens; no global page background is applied here. */
    --surface-panel: #ffffff;
    --surface-subtle: #e7edf1;
    --surface-muted: #dbe4e9;
    --surface-row-alternate: #eef3f6;
    --text-strong: #102a3a;
    --text-default: #121c24;
    --text-muted: #526875;
    --text-placeholder: #6d808c;
    --border-default: #becbd3;
    --border-strong: #91a5b2;
    --surface-shadow: 0 1px 2px rgba(16, 42, 58, .08), 0 5px 16px rgba(16, 42, 58, .04);
    --surface-focus-ring: rgba(29, 52, 69, .18);

    /* Map administration surfaces to the same site-wide contrast system. */
    --admin-ink: var(--text-strong);
    --admin-muted: var(--text-muted);
    --admin-line: var(--border-default);
    --admin-white: var(--surface-panel);

    --site-interaction-color: #c12525;
    --site-interaction-active-color: #9f1f1f;
    --site-interaction-hover-bg: #fff3f3;
    --site-interaction-active-bg: #f9dddd;
    --site-focus-color: #c12525;
    --site-tap-highlight-color: rgba(193, 37, 37, .18);
    --location-country-hover-bg: #9fb2cf;
    --location-country-active-bg: #90a6c6;
    --location-state-hover-bg: #d7e1ed;
    --location-state-active-bg: #cad8e7;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    color: var(--text-default) !important;
    font-family: var(--site-font-family) !important;
    font-size: var(--site-font-size) !important;
    line-height: var(--site-line-height) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/*
 * White panels now sit on a visible cool-gray page layer. Borders and a very
 * light shadow provide separation without turning the interface into boxes.
 */
body :is(
    .legacy-account-panel,
    .legacy-account-summary,
    .legacy-auth-card,
    .profile-readonly-grid p,
    .instant-bitcoin-card,
    .admin-panel,
    .report-card,
    .blocked-card,
    .payment-status,
    .btc-payment-card,
    .static-card
) {
    background-color: var(--surface-panel) !important;
    border-color: var(--border-default) !important;
    box-shadow: var(--surface-shadow);
}

body :is(fieldset, hr, table, th, td) {
    border-color: var(--border-default);
}

body :is(.legacy-account-table, .account-transaction-table, .admin-table) {
    background-color: var(--surface-panel);
}

body :is(.legacy-account-table, .account-transaction-table) tbody tr:nth-child(even) {
    background-color: var(--surface-row-alternate) !important;
}

body :is(
    .legacy-account-muted,
    .profile-field-help,
    .listing-field-help,
    .listing-editor-meta,
    .admin-muted,
    .admin-panel-header p,
    .report-help,
    .form-help,
    .help-text,
    .muted
) {
    color: var(--text-muted) !important;
}

body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([aria-invalid="true"]),
    select:not([aria-invalid="true"]),
    textarea:not([aria-invalid="true"])
) {
    background-color: var(--surface-panel) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-strong) !important;
}

body :is(input, textarea)::placeholder {
    color: var(--text-placeholder) !important;
    opacity: 1;
}

body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([aria-invalid="true"]),
    select:not([aria-invalid="true"]),
    textarea:not([aria-invalid="true"])
):focus {
    border-color: var(--text-default) !important;
    box-shadow: 0 0 0 3px var(--surface-focus-ring) !important;
    outline: 0;
}

body :where(
    a,
    button,
    input,
    select,
    textarea,
    label,
    legend,
    summary,
    p,
    li,
    span,
    div,
    section,
    article,
    header,
    footer,
    nav,
    main,
    aside,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    table,
    th,
    td
) {
    font-family: var(--site-font-family) !important;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    margin-block-start: 0;
    color: inherit;
    font-weight: 700;
    letter-spacing: var(--heading-letter-spacing);
    line-height: var(--site-heading-line-height) !important;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

body h1 {
    font-size: var(--type-title-size) !important;
    line-height: var(--type-title-line-height) !important;
}

body h2 {
    font-size: var(--type-section-size) !important;
    line-height: var(--type-section-line-height) !important;
}

body h3 {
    font-size: var(--heading-3-size) !important;
    line-height: var(--heading-3-line-height) !important;
}

body h4 {
    font-size: var(--heading-4-size) !important;
    line-height: var(--heading-4-line-height) !important;
}

body h5 {
    font-size: var(--heading-5-size) !important;
    line-height: var(--heading-5-line-height) !important;
}

body h6 {
    font-size: var(--heading-6-size) !important;
    line-height: var(--heading-6-line-height) !important;
}

body :where(strong, b) {
    font-weight: 700;
}

body :where(code, kbd, samp, pre) {
    font-family: var(--site-monospace-family) !important;
}

body :where(code, kbd, samp) {
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line-height);
}

body main :where(p, li, dd, dt, blockquote) {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line-height);
    overflow-wrap: break-word;
}

body :where(small, figcaption, caption, time) {
    font-size: var(--type-meta-size) !important;
    line-height: var(--type-meta-line-height) !important;
}

button,
input,
select,
textarea,
label,
legend {
    font-size: var(--type-control-size) !important;
    line-height: var(--type-control-line-height) !important;
}

label,
legend {
    font-weight: 700;
    letter-spacing: var(--label-letter-spacing);
}

button,
input,
select,
textarea {
    font-family: var(--site-font-family) !important;
}

table th,
table td {
    font-size: var(--type-ui-size) !important;
    line-height: var(--type-ui-line-height) !important;
}

table th {
    font-weight: 700;
    letter-spacing: var(--label-letter-spacing);
}

body :where(.legacy-account-shell, .legacy-auth-shell, .admin-shell, .report-page) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    select
) {
    min-height: var(--control-height-default);
}

body :where(.legacy-account-shell, .legacy-auth-shell, .admin-shell, .report-page) textarea {
    min-height: calc(var(--control-height-default) * 2.5);
}

body :where(.legacy-account-shell, .legacy-auth-shell, .admin-shell, .report-page) :is(
    button,
    [type="button"],
    [type="submit"],
    [role="button"]
) {
    min-height: var(--control-height-compact);
}

/* Public reading surfaces use a compact 14/20 measure. */
body :is(
    .postingBody,
    .listing-preview-description,
    .static-card,
    .legacy-blog > div,
    .home-legacy-content
) {
    font-size: var(--type-reading-size) !important;
    line-height: var(--type-reading-line-height) !important;
}

body :is(
    .postingBody,
    .listing-preview-description,
    .static-card,
    .legacy-blog > div,
    .home-legacy-content
) :is(p, li, dd, dt, blockquote) {
    font-size: inherit !important;
    line-height: inherit !important;
}

body .home-legacy-content h2 {
    font-size: var(--heading-2-size) !important;
    line-height: var(--heading-2-line-height) !important;
}

body .home-legacy-content h3 {
    font-size: var(--heading-3-size) !important;
    line-height: var(--heading-3-line-height) !important;
}

body #postingTitle h1 {
    font-size: var(--heading-1-size) !important;
    line-height: var(--heading-1-line-height) !important;
    text-wrap: pretty;
}

body :is(.post-list-title, .gallery-page-heading, .city-page-heading) {
    font-size: var(--heading-1-size) !important;
    line-height: var(--heading-1-line-height) !important;
}

/* Navigation, metadata, helpers, and badges are deliberately compact. */
body :is(
    .site-header,
    .site-footer,
    .site-menu,
    .breadcrumb,
    .breadcrumbs,
    .post-date,
    .detail-meta,
    .listing-field-help,
    .listing-editor-meta,
    .listing-preview-header p,
    .legacy-account-crumb,
    .admin-eyebrow,
    .admin-navigation-label
) {
    font-size: var(--type-meta-size) !important;
    line-height: var(--type-meta-line-height) !important;
}

body :is(
    .admin-badge,
    .admin-city-badge,
    .admin-views-badge,
    .admin-post-status,
    .admin-user-status,
    .account-transaction-status,
    .manage-ad-title-mobile-state,
    .listing-required-mark
) {
    font-size: var(--type-caption-size) !important;
    line-height: var(--type-caption-line-height) !important;
}

/* Shared navigation and action language. */
body :is(
    .site-account-menu,
    .admin-navigation,
    .legacy-account-tabs,
    .legacy-guidance-nav,
    .listing-view-switcher,
    .post-filter-nav,
    .listing-stepper,
    .legacy-ad-progress,
    .manage-ads-pagination,
    .admin-pagination
) {
    font-size: var(--type-ui-size) !important;
    line-height: var(--type-ui-line-height) !important;
}

body :is(
    .site-account-menu,
    .admin-navigation,
    .legacy-account-tabs,
    .legacy-guidance-nav,
    .listing-view-switcher,
    .manage-ads-pagination,
    .admin-pagination
) :is(a, button, summary, span) {
    font-size: inherit !important;
    line-height: inherit !important;
}

body :is(
    .legacy-account-button,
    .legacy-account-action,
    .admin-button,
    .listing-posting-action,
    .listing-publish-action,
    .listing-payment-action,
    .listing-renew-action,
    .legacy-posting-continue,
    .report-submit
) {
    font-size: var(--type-control-size) !important;
    font-weight: 700;
    line-height: var(--type-control-line-height) !important;
    letter-spacing: var(--label-letter-spacing);
}

/* Field labels, helper copy and validation stay distinct at every width. */
body :is(
    .listing-form,
    .profile-edit-form,
    .legacy-account-form,
    .legacy-auth-card,
    .admin-form,
    .report-form
) label {
    font-size: var(--type-control-size) !important;
    line-height: var(--type-control-line-height) !important;
}

body :is(
    .listing-field-help,
    .listing-editor-meta,
    .profile-field-help,
    .legacy-account-muted,
    .legacy-account-error,
    .admin-user-field-help,
    .admin-message-help,
    .admin-blog-html-help,
    .report-help,
    .form-help,
    .help-text,
    .muted
) {
    font-size: var(--type-meta-size) !important;
    line-height: var(--type-meta-line-height) !important;
}

body :is(
    .legacy-account-error,
    .admin-alert,
    .report-success,
    .status
) {
    overflow-wrap: anywhere;
}

/* Public listing discovery and detail pages. */
body :is(.post-row, .gallery-card, .listing-card) {
    font-size: var(--heading-4-size) !important;
    line-height: var(--heading-4-line-height) !important;
}

body :is(.gallery-title, .listing-card-title) {
    font-size: var(--heading-4-size) !important;
    font-weight: 600;
    line-height: var(--heading-4-line-height) !important;
}

body :is(
    .post-date,
    .post-row-meta,
    .gallery-meta,
    .detail-meta,
    .listing-detail-meta,
    .listing-preview-eyebrow,
    .listing-payment-eyebrow,
    .listing-renew-eyebrow
) {
    font-size: var(--type-meta-size) !important;
    line-height: var(--type-meta-line-height) !important;
}

body :is(
    .listing-profile-details,
    .listing-preview-details,
    .listing-renew-facts,
    .listing-payment-breakdown,
    .listing-extras-fields
) :is(dt, dd) {
    font-size: var(--type-body-size) !important;
    line-height: var(--type-body-line-height) !important;
}

body :is(
    .listing-profile-details,
    .listing-preview-details,
    .listing-renew-facts,
    .listing-payment-breakdown,
    .listing-extras-fields
) dt {
    font-weight: 700;
}

/* Compact table rhythm is shared by account and administration surfaces. */
body .admin-table :is(th, td),
body :is(.legacy-account-table, .account-transaction-table) :is(th, td) {
    box-sizing: border-box;
    padding-block: var(--table-cell-padding-block) !important;
    padding-inline: var(--table-cell-padding-inline) !important;
    vertical-align: middle;
}

body .admin-table th,
body :is(.legacy-account-table, .account-transaction-table) th {
    font-size: var(--type-caption-size) !important;
    line-height: var(--type-caption-line-height) !important;
}

body .admin-table td,
body :is(.legacy-account-table, .account-transaction-table) td {
    font-size: var(--type-ui-size) !important;
    line-height: var(--type-ui-line-height) !important;
}

/* Account pages retain comfortable form copy while sharing the same scale. */
body .legacy-account-shell {
    font-size: var(--type-body-size) !important;
    line-height: 1.5 !important;
}

body .legacy-account-shell h1 {
    font-size: var(--heading-1-size) !important;
    line-height: var(--heading-1-line-height) !important;
}

body .legacy-account-shell h2 {
    font-size: var(--heading-2-size) !important;
    line-height: var(--heading-2-line-height) !important;
}

body .legacy-account-shell h3 {
    font-size: var(--heading-3-size) !important;
    line-height: var(--heading-3-line-height) !important;
}

body .legacy-account-shell :is(.legacy-account-tabs, .legacy-account-action, .legacy-account-button) {
    font-size: var(--type-ui-size) !important;
    line-height: var(--type-ui-line-height) !important;
}

body .legacy-account-shell :is(.account-page-heading, .legacy-account-panel, .profile-edit-panel) > :last-child {
    margin-block-end: 0;
}

body .legacy-account-shell :is(.profile-section-title, .account-section-title, .legacy-panel-title) {
    font-size: var(--heading-4-size) !important;
    line-height: var(--heading-4-line-height) !important;
}

body .listing-stepper :is(.listing-step-label, .listing-step-marker) {
    font-size: var(--type-meta-size) !important;
    line-height: var(--type-meta-line-height) !important;
}

body :is(.legacy-country-header, .legacy-state-header) {
    font-family: var(--site-font-family) !important;
    font-size: var(--type-step-2) !important;
    font-weight: 500;
    line-height: 1.4286 !important;
}

body .legacy-local-city-option {
    font-size: var(--type-body-size) !important;
    font-weight: 400;
    line-height: var(--type-body-line-height) !important;
}

body .legacy-local-city-option small {
    font-size: var(--type-meta-size) !important;
    line-height: var(--type-meta-line-height) !important;
}

/* Administration is dense by design, but headings and controls stay legible. */
body.admin-body,
body .admin-shell {
    font-size: var(--type-ui-size) !important;
    line-height: var(--type-ui-line-height) !important;
}

body .admin-shell :is(p, li, dd, dt) {
    font-size: var(--type-ui-size) !important;
    line-height: var(--type-ui-line-height) !important;
}

body .admin-shell h1,
body .admin-login-shell h1 {
    font-size: var(--heading-1-size) !important;
    line-height: var(--heading-1-line-height) !important;
}

body .admin-shell h2,
body .admin-login-shell h2 {
    font-size: var(--heading-2-size) !important;
    line-height: var(--heading-2-line-height) !important;
}

body .admin-shell h3,
body .admin-login-shell h3 {
    font-size: var(--heading-3-size) !important;
    line-height: var(--heading-3-line-height) !important;
}

body .admin-topbar-title {
    font-size: var(--text-sm) !important;
    line-height: var(--type-subheading-line-height) !important;
}

body .admin-navigation :is(a, summary) {
    font-size: var(--type-ui-size) !important;
    line-height: var(--type-ui-line-height) !important;
}

body .admin-page-heading p,
body .admin-panel-header p,
body :is(.admin-inventory-note, .admin-payment-readonly-note, .admin-security-boundary) {
    font-size: var(--type-meta-size) !important;
    line-height: var(--type-meta-line-height) !important;
}

body .admin-panel-header h2 {
    margin-block-end: var(--space-1);
}

body .admin-panel-header h3 {
    font-size: var(--heading-4-size) !important;
    line-height: var(--heading-4-line-height) !important;
}

body .admin-form :is(input, select, textarea),
body .admin-form label {
    font-size: var(--type-ui-size) !important;
    line-height: var(--type-ui-line-height) !important;
}

/* Home/category directory headings need hierarchy without oversized pills. */
body#home .geoUnit h3 {
    font-size: var(--heading-3-size) !important;
    line-height: var(--heading-3-line-height) !important;
}

body#home .geoUnit :is(ul, ol) {
    padding-inline-start: var(--space-3);
}

body#home .geoUnit li,
body#home .geoUnit li a {
    font-size: var(--heading-4-size) !important;
    line-height: var(--heading-4-line-height) !important;
}

body .category-column h3,
body .category-section h3 {
    font-size: var(--heading-category-size) !important;
    line-height: var(--heading-category-line-height) !important;
}

body .category-column a,
body .category-section a {
    font-size: var(--text-sm) !important;
    line-height: 1.4286 !important;
}

body .post-row,
body .post-row a,
body .post-row-title,
body .post-row .post-detail {
    font-size: var(--heading-4-size) !important;
    line-height: var(--heading-4-line-height) !important;
}

body :is(.scam-alert, .listing-scam-alert, .listing-safety-alert) {
    font-size: var(--type-body-size) !important;
    line-height: var(--type-body-line-height) !important;
}

body :is(.scam-alert, .listing-scam-alert, .listing-safety-alert) :is(h2, h3, strong:first-child) {
    font-size: var(--heading-4-size) !important;
    line-height: var(--heading-4-line-height) !important;
}

body :is(.report-page, .blocked-card, .payment-status, .btc-payment-card) {
    font-size: var(--type-body-size) !important;
    line-height: var(--type-body-line-height) !important;
}

body :is(.report-page, .blocked-card, .payment-status, .btc-payment-card) :is(p, li, dd, dt) {
    font-size: inherit;
    line-height: inherit;
}

body .legacy-auth-shell h1 {
    font-size: var(--heading-1-size) !important;
    line-height: var(--heading-1-line-height) !important;
}

body .legacy-auth-shell h2 {
    font-size: var(--heading-2-size) !important;
    line-height: var(--heading-2-line-height) !important;
}

/* Optional role utilities for new views and components. */
.type-caption {
    font-size: var(--type-caption-size) !important;
    line-height: var(--type-caption-line-height) !important;
}

.type-meta {
    font-size: var(--type-meta-size) !important;
    line-height: var(--type-meta-line-height) !important;
}

.type-body {
    font-size: var(--type-body-size) !important;
    line-height: var(--type-body-line-height) !important;
}

.type-reading {
    font-size: var(--type-reading-size) !important;
    line-height: var(--type-reading-line-height) !important;
}

.type-title {
    font-size: var(--type-title-size) !important;
    line-height: var(--type-title-line-height) !important;
}

body :where(
    a,
    button,
    input,
    select,
    textarea,
    label,
    summary,
    [role="button"],
    [tabindex]
) {
    -webkit-tap-highlight-color: var(--site-tap-highlight-color);
}

body .admin-navigation :is(a, summary),
body .legacy-account-tabs a,
body .legacy-guidance-nav a {
    box-sizing: border-box;
    min-height: var(--control-height-compact);
}

body .site-account-menu :is(a, button) {
    box-sizing: border-box;
    min-height: var(--control-height-default);
}

/* Semantic utilities for future components; every value stays on the scale. */
.type-ui {
    font-size: var(--type-ui-size) !important;
    line-height: var(--type-ui-line-height) !important;
}

.type-control {
    font-size: var(--type-control-size) !important;
    line-height: var(--type-control-line-height) !important;
}

.type-section {
    font-size: var(--type-section-size) !important;
    line-height: var(--type-section-line-height) !important;
}

.type-measure-reading {
    max-inline-size: var(--content-measure-reading);
}

.type-measure-form {
    max-inline-size: var(--content-measure-form);
}

@media (min-width: 701px) and (max-width: 1024px) {
    :root {
        --heading-1-size: 1.3125rem;
        --heading-1-line-height: 1.2858;
        --table-cell-padding-inline: var(--space-4);
    }

    body .admin-table :is(th, td),
    body :is(.legacy-account-table, .account-transaction-table) :is(th, td) {
        padding-inline: var(--table-cell-padding-inline) !important;
    }
}

@media (max-width: 700px) {
    :root {
        /* Phone ramp: larger than desktop while retaining the same hierarchy. */
        --type-caption-size: var(--type-step-0);
        --type-caption-line-height: 1.5;
        --type-meta-size: var(--type-step-1);
        --type-meta-line-height: 1.3847;
        --type-ui-size: var(--type-step-2);
        --type-ui-line-height: 1.4286;
        --type-body-size: var(--type-step-3);
        --type-body-line-height: 1.4667;
        --type-control-size: var(--type-step-4);
        --type-control-line-height: 1.375;
        --type-reading-size: var(--type-step-3);
        --type-reading-line-height: 1.4667;

        --heading-1-size: var(--type-step-8);
        --heading-1-line-height: 1.25;
        --heading-2-size: var(--type-step-6);
        --heading-2-line-height: 1.3;
        --heading-3-size: var(--type-step-5);
        --heading-3-line-height: 1.3334;
        --heading-4-size: var(--type-step-4);
        --heading-4-line-height: 1.375;
        --heading-5-size: var(--type-step-3);
        --heading-5-line-height: 1.4;
        --heading-6-size: var(--type-step-2);
        --heading-6-line-height: 1.4286;
        --heading-category-size: var(--type-step-3);
        --heading-category-line-height: 1.4;

        --control-height-compact: 2.25rem;
        --control-height-default: 2.5rem;
        --table-cell-padding-inline: var(--space-4);
        --table-cell-padding-block: var(--space-3);
    }

    body #postingTitle h1,
    body :is(.post-list-title, .gallery-page-heading, .city-page-heading) {
        font-size: var(--heading-1-size) !important;
        line-height: var(--heading-1-line-height) !important;
    }

    body .legacy-account-shell h1,
    body .admin-shell h1,
    body .admin-login-shell h1,
    body .legacy-auth-shell h1 {
        font-size: var(--heading-1-size) !important;
        line-height: var(--heading-1-line-height) !important;
    }

    body#home .geoUnit h3 {
        font-size: var(--heading-4-size) !important;
        line-height: var(--heading-4-line-height) !important;
    }

    body#home .geoUnit li,
    body#home .geoUnit li a {
        font-size: var(--type-step-3) !important;
        line-height: 1.4667 !important;
    }

    body .category-column a,
    body .category-section a {
        font-size: var(--type-step-3) !important;
        line-height: 1.4667 !important;
    }

    input,
    select,
    textarea {
        font-size: var(--text-base) !important;
    }

    body .site-account-menu :is(a, button),
    body .legacy-account-tabs a,
    body .legacy-guidance-nav a,
    body :is(.listing-view-button, .manage-ads-page-link) {
        min-height: var(--control-height-touch);
    }

    body .admin-table :is(th, td),
    body :is(.legacy-account-table, .account-transaction-table) :is(th, td) {
        padding-block: var(--table-cell-padding-block) !important;
        padding-inline: var(--table-cell-padding-inline) !important;
    }

    body :is(.legacy-country-header, .legacy-state-header) {
        font-size: var(--type-step-3) !important;
        line-height: 1.4667 !important;
    }

    body .legacy-local-city-option {
        font-size: var(--type-body-size) !important;
        line-height: var(--type-body-line-height) !important;
    }
}