/* =========================================================================
   Design tokens
   Subject: a U.S. auto-loan finance desk. Palette pulls from a dealership
   worksheet + dashboard trip-odometer rather than generic "fintech" cliches.
   ========================================================================= */
:root {
    --navy-900: #0F1D2B;
    --navy-800: #16283A;
    --steel: #2C4A63;
    --steel-light: #4A6E8A;
    --paper: #F6F4EE;
    --paper-raised: #FFFFFF;
    --ink: #16212B;
    --ink-soft: #4B5A67;
    --amber: #E8A33D;
    --amber-deep: #C97F1E;
    --green: #3F8361;
    --red: #B4482E;
    --line: #DEDACE;
    --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'Consolas', monospace;
    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 16px;
    --shadow-card: 0 1px 2px rgba(15,29,43,.06), 0 8px 24px -12px rgba(15,29,43,.18);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--navy-900);
    line-height: 1.15;
    margin: 0 0 .5em;
}

h1 {
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    font-weight: 700;
}

h2 {
    font-size: 1.5rem;
    font-weight: 600;
}

h3 {
    font-size: 1.05rem;
    font-weight: 600;
}

p {
    margin: 0 0 1em;
    color: var(--ink-soft);
}

a {
    color: var(--steel);
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--amber);
    color: var(--navy-900);
    padding: 10px 16px;
    z-index: 200;
    font-weight: 600;
}

    .skip-link:focus {
        left: 10px;
        top: 10px;
    }

/* ---------- Header ---------- */
.site-header {
    background: var(--navy-900);
    border-bottom: 3px solid var(--amber);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.brand-word {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
    letter-spacing: -0.01em;
}

.main-nav {
    display: flex;
    gap: 26px;
}

    .main-nav a {
        color: #C9D4DD;
        text-decoration: none;
        font-weight: 500;
        font-size: .95rem;
    }

        .main-nav a:hover {
            color: var(--amber);
        }

/* ---------- Ad slots ---------- */
.ad-slot {
    margin: 18px auto;
    text-align: center;
    min-height: 90px;
}

.ad-slot-top {
    padding-top: 16px;
}

.ad-slot-inline {
    margin: 34px 0;
    padding: 14px 0;
    border-top: 1px dashed var(--line);
    border-bottom: 1px dashed var(--line);
}

.ad-label {
    display: block;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9AA6AE;
    margin-bottom: 6px;
}

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
    color: #fff;
    padding: 44px 0 30px;
}

.hero-eyebrow {
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 10px;
}

.hero h1 {
    color: #fff;
    max-width: 720px;
}

.hero-sub {
    color: #B9C4CD;
    max-width: 620px;
    font-size: 1.05rem;
}

.trust-strip {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    margin-top: 18px;
    font-family: var(--font-mono);
    font-size: .82rem;
    color: #8FA0AC;
}

    .trust-strip strong {
        color: var(--amber);
    }

/* ---------- Calculator layout ---------- */
.calc-shell {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 28px;
    padding: 30px 0 10px;
    align-items: start;
}

@media (max-width: 900px) {
    .calc-shell {
        grid-template-columns: 1fr;
    }
}

.panel {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
    padding: 24px;
}

.panel-inputs {
    position: sticky;
    top: 16px;
}

@media (max-width: 900px) {
    .panel-inputs {
        position: static;
    }
}

.field {
    margin-bottom: 16px;
}

    .field label {
        display: flex;
        justify-content: space-between;
        font-weight: 600;
        font-size: .85rem;
        color: var(--navy-900);
        margin-bottom: 6px;
    }

    .field .val {
        font-family: var(--font-mono);
        color: var(--steel);
    }

    .field input[type="number"], .field select {
        width: 100%;
        padding: 10px 12px;
        border: 1.5px solid var(--line);
        border-radius: var(--radius-s);
        font-family: var(--font-mono);
        font-size: .95rem;
        background: var(--paper);
        color: var(--ink);
    }

    .field input[type="range"] {
        width: 100%;
        accent-color: var(--amber-deep);
    }

.field-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: var(--ink-soft);
}

.field-hint {
    font-size: .78rem;
    color: #8B96A0;
    margin-top: 4px;
}

/* ---------- Odometer readout (signature element) ---------- */
.readout {
    background: var(--navy-900);
    border-radius: var(--radius-l);
    padding: 26px 24px;
    color: #fff;
    box-shadow: var(--shadow-card);
}

.readout-label {
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #93A4AF;
    margin-bottom: 10px;
}

.odometer {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-mono);
}

    .odometer .cur {
        font-size: 1.6rem;
        color: var(--amber);
        font-weight: 600;
    }

    .odometer .digits {
        display: flex;
        gap: 3px;
    }

.odo-digit {
    background: #0A141E;
    border: 1px solid #223243;
    border-radius: 4px;
    width: 34px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    font-weight: 600;
    color: #fff;
}

.odo-sep {
    font-size: 1.9rem;
    color: #4A6072;
    align-self: flex-end;
    margin: 0 1px;
}

.odometer .per {
    font-family: var(--font-body);
    font-size: .95rem;
    color: #93A4AF;
    align-self: flex-end;
    margin-left: 6px;
}

.readout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 22px;
}

.readout-item .lbl {
    font-size: .75rem;
    color: #8FA0AC;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.readout-item .num {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 600;
    margin-top: 2px;
}

    .readout-item .num.pos {
        color: #7FCB9F;
    }

    .readout-item .num.neg {
        color: #E5896F;
    }

/* ---------- Worksheet breakdown (itemized like a finance desk) ---------- */
.worksheet {
    margin-top: 22px;
}

.worksheet-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: .93rem;
}

    .worksheet-row.total {
        border-bottom: none;
        border-top: 2px solid var(--navy-900);
        font-weight: 700;
        padding-top: 12px;
    }

    .worksheet-row .num {
        font-family: var(--font-mono);
    }

/* ---------- Cards / grid ---------- */
.card-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 26px;
}

@media (max-width: 700px) {
    .card-row {
        grid-template-columns: 1fr;
    }
}

.stat-card {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    padding: 18px;
}

    .stat-card .lbl {
        font-size: .78rem;
        color: var(--ink-soft);
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .stat-card .num {
        font-family: var(--font-mono);
        font-size: 1.35rem;
        font-weight: 600;
        color: var(--navy-900);
        margin-top: 4px;
    }

/* ---------- Amortization table ---------- */
.amort-wrap {
    margin-top: 30px;
}

.amort-toggle {
    background: none;
    border: 1.5px solid var(--steel);
    color: var(--steel);
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-size: .88rem;
}

    .amort-toggle:hover {
        background: var(--steel);
        color: #fff;
    }

table.amort {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    font-family: var(--font-mono);
    font-size: .85rem;
}

    table.amort th {
        text-align: right;
        padding: 8px 10px;
        background: var(--navy-900);
        color: #fff;
        font-family: var(--font-body);
        font-size: .75rem;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

        table.amort th:first-child, table.amort td:first-child {
            text-align: left;
        }

    table.amort td {
        text-align: right;
        padding: 7px 10px;
        border-bottom: 1px solid var(--line);
    }

    table.amort tr:nth-child(even) {
        background: #FBFAF6;
    }

/* ---------- Guides list ---------- */
.page-head {
    padding: 40px 0 8px;
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 24px 0 50px;
}

@media (max-width: 720px) {
    .guide-grid {
        grid-template-columns: 1fr;
    }
}

.guide-card {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    padding: 22px;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    display: block;
}

    .guide-card h2 {
        font-size: 1.15rem;
        margin-bottom: 8px;
    }

    .guide-card p {
        font-size: .92rem;
        margin-bottom: 10px;
    }

.guide-meta {
    font-family: var(--font-mono);
    font-size: .75rem;
    color: #93A4AF;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.article-wrap {
    max-width: 740px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

    .article-wrap .guide-meta {
        margin-bottom: 10px;
        display: block;
    }

    .article-wrap h1 {
        margin-bottom: .3em;
    }

.article-lead {
    font-size: 1.1rem;
    color: var(--ink-soft);
    margin-bottom: 1.6em;
}

.article-body h2 {
    margin-top: 1.6em;
    font-size: 1.3rem;
}

.article-body ul {
    color: var(--ink-soft);
    padding-left: 1.2em;
}

.article-body li {
    margin-bottom: .4em;
}

.back-link {
    display: inline-block;
    margin-bottom: 20px;
    font-weight: 600;
    text-decoration: none;
}

/* ---------- Static pages (about/privacy/terms/contact) ---------- */
.prose {
    max-width: 740px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

    .prose h2 {
        margin-top: 1.5em;
    }

    .prose ul {
        color: var(--ink-soft);
    }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--navy-900);
    color: #B9C4CD;
    margin-top: 50px;
}

.footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 30px;
    padding: 40px 20px 20px;
}

@media (max-width: 640px) {
    .footer-inner {
        grid-template-columns: 1fr;
    }
}

.footer-col h3 {
    color: #fff;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 10px;
}

.footer-col a {
    display: block;
    color: #9DAEB8;
    text-decoration: none;
    font-size: .9rem;
    margin-bottom: 6px;
}

    .footer-col a:hover {
        color: var(--amber);
    }

.footer-col p {
    font-size: .85rem;
    color: #8393A0;
}

.footer-bottom {
    border-top: 1px solid #223243;
    padding: 14px 20px;
    font-size: .8rem;
    color: #6F808C;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/*    Ìí¼ÓµÄ   2026-8-11  */

/* =========================================================================
   Layout enhancement: results grid (readout + worksheet side-by-side)
   ========================================================================= */
.results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .results-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Adjust calc-shell ratio for a slimmer input panel */
.calc-shell {
    grid-template-columns: 340px 1fr; /* was: minmax(0, 380px) minmax(0, 1fr) */
}

/* Make readout content adapt to narrower column */
.readout {
    padding: 22px 20px;
}

.odometer .cur {
    font-size: 1.4rem;
}

.odo-digit {
    width: 28px;
    height: 44px;
    font-size: 1.6rem;
}

.odo-sep {
    font-size: 1.6rem;
}

.readout-grid {
    gap: 10px;
    margin-top: 16px;
}

.readout-item .num {
    font-size: 1rem;
}

/* Worksheet panel inside grid: keep it compact */
.results-grid .panel {
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
}

    .results-grid .panel h2 {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

.worksheet-row {
    padding: 7px 0;
    font-size: .88rem;
}

    .worksheet-row.total {
        padding-top: 10px;
    }

/* Card row: slightly tighter spacing */
.card-row {
    gap: 14px;
    margin-top: 20px;
}

.stat-card {
    padding: 14px 16px;
}

    .stat-card .num {
        font-size: 1.2rem;
    }

/* Amortization table: full width, no extra margins */
.amort-wrap {
    margin-top: 22px;
}

table.amort {
    font-size: .82rem;
}

    table.amort th,
    table.amort td {
        padding: 6px 8px;
    }

/* Hero: reduce vertical padding on large screens */
@media (min-width: 1200px) {
    .hero {
        padding: 34px 0 22px;
    }

        .hero h1 {
            max-width: 680px;
        }

    .hero-sub {
        max-width: 580px;
    }
}

/* Small screens: keep everything readable */
@media (max-width: 480px) {
    .panel {
        padding: 16px;
    }

    .readout {
        padding: 18px 16px;
    }

    .odo-digit {
        width: 24px;
        height: 38px;
        font-size: 1.3rem;
    }

    .odo-sep {
        font-size: 1.3rem;
    }

    .odometer .cur {
        font-size: 1.2rem;
    }

    .odometer .per {
        font-size: .8rem;
    }

    .readout-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .worksheet-row {
        font-size: .82rem;
        padding: 6px 0;
    }

    .stat-card .num {
        font-size: 1rem;
    }
}



/* ---------- Calculate button ---------- */
.btn-calc {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: var(--radius-s);
    background: var(--amber-deep);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    letter-spacing: 0.02em;
}

    .btn-calc:hover {
        background: #B06E1A;
        transform: scale(1.01);
    }

    .btn-calc:active {
        transform: scale(0.98);
    }




/*ÐÂÔöµÄ*/
.tax-rule-note {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.85rem;
}

    .tax-rule-note strong {
        display: block;
        color: #334155;
        margin-bottom: 4px;
    }



/* =========================================================================
   Conversion / affiliate / share (commercial)
   ========================================================================= */
.conversion-section { margin-top: 8px; }
.conversion-panel h2 { margin-bottom: 8px; }
.conversion-lead { font-size: 1.02rem; color: var(--ink); margin-bottom: 18px; }
.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: var(--radius-s);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--line);
    cursor: pointer;
    background: var(--paper-raised);
    color: var(--navy-900);
    transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover { border-color: var(--steel-light); background: #fff; }
.btn-secondary { background: var(--paper-raised); }
.btn-primary {
    background: var(--navy-900);
    color: #fff;
    border-color: var(--navy-900);
}
.btn-primary:hover { background: var(--steel); border-color: var(--steel); color: #fff; }

.cta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.cta-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 18px 16px;
    border-radius: var(--radius-m);
    background: var(--navy-900);
    color: #F6F4EE;
    text-decoration: none;
    border: 1px solid transparent;
    box-shadow: var(--shadow-card);
}
.cta-card:hover { transform: translateY(-1px); }
.cta-card.cta-primary { background: linear-gradient(145deg, #16283A 0%, #0F1D2B 100%); border-color: var(--amber); }
.cta-card.cta-placeholder {
    background: var(--paper-raised);
    color: var(--ink);
    border: 1px dashed var(--line);
}
.cta-kicker {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--amber);
    font-weight: 600;
}
.cta-placeholder .cta-kicker { color: var(--ink-soft); }
.cta-card strong { font-size: 1.08rem; font-family: var(--font-display); }
.cta-desc { font-size: 0.9rem; opacity: .88; line-height: 1.45; }
.cta-placeholder .cta-desc { color: var(--ink-soft); }
.cta-go { margin-top: 8px; font-weight: 600; color: var(--amber); font-size: 0.9rem; }

.affiliate-products { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.affiliate-products h3 { margin-bottom: 4px; }
.affiliate-note { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 12px; }
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}
.product-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border-radius: var(--radius-s);
    background: var(--paper);
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
}
.product-card:hover { border-color: var(--amber); background: #fff; }
.product-title { font-weight: 600; font-size: 0.92rem; }
.product-meta { font-size: 0.78rem; color: var(--ink-soft); }

.affiliate-disclosure {
    margin: 10px 0 0;
    font-size: 0.78rem;
    color: var(--ink-soft);
    max-width: 720px;
    line-height: 1.4;
}

@media print {
    .site-header, .site-footer, .ad-slot, .conversion-section,
    .hero, .trust-strip, .main-nav, .action-row, .cta-grid,
    .affiliate-products, .skip-link { display: none !important; }
    .amort-details { display: block !important; }
    .amort-details summary { display: none; }
    .amort-content { display: block !important; }
    body { background: #fff; }
}

@media (max-width: 640px) {
    .action-row { flex-direction: column; }
    .btn { width: 100%; }
}


/* State directory & detail */
.hero-compact { padding-bottom: 28px; }
.state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.state-chip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: var(--radius-s);
    border: 1px solid var(--line);
    background: var(--paper-raised);
    text-decoration: none;
    color: var(--ink);
}
.state-chip:hover { border-color: var(--amber); }
.state-chip strong { font-family: var(--font-display); font-size: 0.98rem; }
.state-chip span { font-size: 0.78rem; color: var(--ink-soft); }
.state-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
table.state-facts {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
table.state-facts th,
table.state-facts td {
    text-align: left;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
table.state-facts th { width: 55%; font-weight: 500; color: var(--ink-soft); }
.plain-list { padding-left: 1.2rem; color: var(--ink-soft); }
.plain-list li { margin-bottom: 6px; }
.muted { color: var(--ink-soft); }
.inline-download-form { display: inline; margin: 0; padding: 0; }


.conversion-panel {
    border: 2px solid var(--amber);
    box-shadow: var(--shadow-card);
}
.conversion-section {
    scroll-margin-top: 80px;
}
#amort-schedule {
    scroll-margin-top: 72px;
}
#amort-schedule[open] .amort-content {
    display: block;
}


#amazon-recs {
    margin-top: 8px;
    padding: 16px;
    background: #fff;
    border: 2px solid var(--amber);
    border-radius: var(--radius-m);
}
#amazon-recs h3 {
    margin: 0 0 6px;
    font-size: 1.15rem;
}
#amazon-recs .product-grid {
    margin-top: 12px;
}
#amazon-recs .product-card {
    background: var(--paper);
    border: 1px solid var(--line);
    min-height: 72px;
}
#amazon-recs .product-card:hover {
    border-color: var(--amber-deep);
    box-shadow: var(--shadow-card);
}


/* ========== Mobile: results visibility ========== */
@media (max-width: 900px) {
    .calc-shell {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    /* Show payment result ABOVE the long form on phones */
    .results-col {
        order: -1;
    }
    .panel-inputs {
        order: 1;
        position: static;
    }
    #results-panel {
        scroll-margin-top: 72px;
    }
    .readout {
        padding: 18px 16px;
    }
    .odometer {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .odometer .digits {
        flex-wrap: wrap;
        font-size: 1.75rem;
        font-weight: 700;
        font-family: var(--font-mono);
        letter-spacing: 0.02em;
        color: #fff;
        line-height: 1.2;
        word-break: break-all;
    }
    .odo-digit {
        width: 28px;
        height: 44px;
        font-size: 1.45rem;
    }
    .readout-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .readout-item .num {
        font-size: 1rem;
    }
    /* Sticky calculate bar so user always can submit */
    .panel-inputs .btn-calc {
        position: sticky;
        bottom: 12px;
        z-index: 20;
        box-shadow: 0 8px 24px rgba(0,0,0,.18);
    }
    .results-grid {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
}

@media (max-width: 400px) {
    .odometer .digits {
        font-size: 1.5rem;
    }
    .panel {
        padding: 16px;
    }
}