/* 1URL.PL – układ serwisu: nagłówek, stopka, widgety, strony publiczne */

/* ================= NAGŁÓWEK ================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner { display: flex; align-items: center; gap: var(--s-6); min-height: var(--header-h); }
.site-logo { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; flex-shrink: 0; }
.site-logo:hover { text-decoration: none; }
.site-logo { gap: var(--s-2); }
.site-logo img { height: 32px; width: 32px; display: block; }
.site-logo__text { font-weight: 800; font-size: 1.5rem; letter-spacing: -.04em; }
.site-logo__text span { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--r-md); cursor: pointer; }

.site-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); flex: 1; }
.site-nav__links { display: flex; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.site-nav__links a { display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); color: var(--text-muted); font-weight: 500; text-decoration: none; transition: color .15s, background .15s; }
.site-nav__links a:hover { color: var(--text); background: var(--surface-2); }
.site-nav__links a.is-active { color: var(--primary); background: var(--primary-soft); }
.site-nav__actions { display: flex; align-items: center; gap: var(--s-2); }
.lang-switch { margin: 0; }
.avatar-circle { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); display: block; }
.avatar-link:hover .avatar-circle { border-color: var(--primary); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .icon-moon { display: block; }
}

@media (max-width: 1179px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: var(--s-4);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    padding: var(--s-4); background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg);
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: transform .2s var(--ease), opacity .2s var(--ease), visibility .2s;
  }
  .site-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .site-nav__links { flex-direction: column; }
  .site-nav__links a { padding: var(--s-3) var(--s-4); font-size: var(--fs-lg); }
  .site-nav__actions { flex-wrap: wrap; padding-top: var(--s-4); border-top: 1px solid var(--border); }
  .site-nav__actions .btn { flex: 1 1 auto; }
}
/* Bez JS: menu mobilne zawsze rozwinięte pod nagłówkiem, żeby nawigacja była dostępna */
.no-js .nav-toggle { display: none; }
.no-js .site-nav { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; }

/* ================= STOPKA ================= */
.site-footer { margin-top: var(--s-20); padding: var(--s-12) 0 var(--s-6); background: var(--surface); border-top: 1px solid var(--border); }
.site-footer__grid { display: grid; gap: var(--s-8); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.site-footer__brand { max-width: 320px; }
.site-footer__brand p { color: var(--text-muted); margin-top: var(--s-3); font-size: var(--fs-sm); }
.site-footer__title { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: var(--s-4); }
.site-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.site-footer__links a { color: var(--text); font-size: var(--fs-sm); }
.site-footer__links a:hover { color: var(--primary); }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--border); }
.site-footer__bottom p { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }

/* ================= REKLAMY ================= */
.global-ad { position: relative; text-align: center; margin: var(--s-4) auto; }
.global-ad img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.global-ad-left, .global-ad-right { position: fixed; top: 50%; transform: translateY(-50%); z-index: 90; }
.global-ad-left { left: 10px; } .global-ad-right { right: 10px; }
@media (max-width: 1399px) { .global-ad-left, .global-ad-right { display: none; } }

/* ================= ASYSTENT AI ================= */
#ai-chat-bubble {
  position: fixed; bottom: 20px; right: 20px; width: 52px; height: 52px; border-radius: 50%;
  background: var(--grad-brand); color: #fff; font-size: 24px; line-height: 52px; text-align: center; cursor: pointer;
  z-index: 9998; box-shadow: var(--shadow-lg); transition: transform .15s var(--ease);
}
#ai-chat-bubble:hover { transform: scale(1.06); }
#ai-chat-box {
  display: none; position: fixed; bottom: 84px; right: 20px; width: min(360px, calc(100vw - 32px)); max-height: 70vh;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; z-index: 9998; box-shadow: var(--shadow-lg); flex-direction: column;
}
.ai-chat-header { background: var(--grad-brand); color: #fff; padding: var(--s-3) var(--s-4); font-weight: 700; text-align: center; }
.ai-chat-messages { padding: var(--s-3); height: 260px; overflow-y: auto; font-size: var(--fs-sm); }
.ai-chat-messages div { margin-bottom: var(--s-2); }
.ai-chat-messages .user { text-align: right; color: var(--primary); }
.ai-chat-messages .ai { text-align: left; color: var(--text); }
#ai-chat-form { display: flex; border-top: 1px solid var(--border); margin: 0; }
#ai-chat-input { flex: 1; min-width: 0; padding: var(--s-3); background: var(--surface-2); border: 0; color: var(--text); font: inherit; }
#ai-chat-input:focus { outline: 2px solid var(--primary); outline-offset: -2px; }
#ai-chat-form button { background: var(--btn-bg); border: 0; color: #fff; padding: 0 var(--s-4); font-weight: 600; cursor: pointer; }
#ai-chat-end { margin: var(--s-2); background: var(--surface-2); color: var(--text); padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; }
.ai-section-title { display: block; font-size: 1.05em; margin: var(--s-2) 0; color: var(--primary); }
.ai ul { padding-left: 20px; margin: 5px 0 10px; }
.ai li { margin-bottom: 4px; line-height: 1.4; }
div:where(.swal2-container) { z-index: 10000 !important; }

/* ================= STRONA GŁÓWNA ================= */
.brand-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-alt { background: var(--surface-2); border-block: 1px solid var(--border); }
.icon-box-lg { width: 64px; height: 64px; border-radius: var(--r-lg); margin: 0; }

.hero { position: relative; padding: var(--s-16) 0 var(--s-12); background: var(--grad-hero); overflow: hidden; }
.hero__inner { text-align: center; max-width: 900px; }
.hero__badge { margin-bottom: var(--s-5); }
.hero__badge svg { width: 14px; height: 14px; }
.hero__title { font-size: var(--fs-4xl); margin-bottom: var(--s-4); }
.hero__lead { font-size: var(--fs-lg); color: var(--text-muted); max-width: 640px; margin: 0 auto var(--s-8); }
.hero__trust { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-6); color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500; }
.hero__trust li { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero__trust svg { width: 16px; height: 16px; color: var(--success); }

.shortener { text-align: left; padding: var(--s-5); box-shadow: var(--shadow-lg); border-radius: 20px; }
@media (min-width: 768px) { .shortener { padding: var(--s-6); } }
.shorten-row { display: flex; flex-direction: column; gap: var(--s-3); }
@media (min-width: 640px) { .shorten-row { flex-direction: row; } .shorten-row .input { flex: 1; min-width: 0; } }
.input-lg { min-height: 56px; font-size: var(--fs-lg); padding-inline: var(--s-5); }
.shorten-meta { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: flex-end; margin-top: var(--s-4); }
.shorten-meta .field { margin: 0; flex: 1 1 260px; }
.shorten-meta .btn { flex: 0 0 auto; }
.field label .badge { margin-left: var(--s-2); }
.options { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px dashed var(--border); display: grid; gap: var(--s-4); }
.options[hidden] { display: none; }
.options__grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.expiry-options { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4); display: grid; gap: var(--s-3); margin: 0; }
.expiry-options legend { padding: 0 var(--s-2); }
.slug-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.slug-btn { background: var(--primary-soft); color: var(--primary); border: 1px solid transparent; padding: 6px 12px; border-radius: var(--r-full); font: 600 var(--fs-sm)/1 var(--font); cursor: pointer; transition: background .15s, color .15s; }
.slug-btn:hover { background: var(--btn-bg); color: #fff; }

.result { margin-bottom: var(--s-5); }
.result__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); font-size: var(--fs-lg); }
.result__ok { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--success-soft); color: var(--success); }
.result__ok svg { width: 16px; height: 16px; }
.result__row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-2) 0 var(--s-4); }
.result__row .input { flex: 1 1 240px; min-width: 0; font-weight: 600; color: var(--primary); }
.result__extras { display: flex; flex-wrap: wrap; gap: var(--s-6); align-items: center; }
.result__qr { margin: 0; text-align: center; }
.result__qr img { border-radius: var(--r-md); border: 1px solid var(--border); background: #fff; padding: 6px; }
.share { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.share a { display: inline-flex; transition: transform .15s var(--ease); }
.share a:hover { transform: translateY(-2px); }

.feature h3 { font-size: var(--fs-lg); }
.feature p { margin: 0; font-size: var(--fs-sm); }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.step { position: relative; padding-top: var(--s-10); margin-top: var(--s-5); }
.step__num { position: absolute; top: calc(var(--s-5) * -1); left: var(--s-6); width: 44px; height: 44px; border-radius: var(--r-md); background: var(--grad-brand); color: #fff; font-weight: 800; font-size: var(--fs-xl); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(79, 70, 229, .35); }
.step h3 { margin-bottom: var(--s-2); }
.step p { margin: 0; }

.promo { display: grid; gap: var(--s-8); padding: var(--s-8); border-radius: 24px; color: #fff; background: var(--grad-brand); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; align-items: center; }
@media (min-width: 860px) { .promo { grid-template-columns: 1.2fr 1fr; padding: var(--s-12); } }
.promo::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); pointer-events: none; }
.promo h2, .promo p { color: #fff; }
.promo p { opacity: .92; font-size: var(--fs-lg); }
.promo__eyebrow { color: #fff; opacity: .85; }
.promo__btn { background: #fff; color: #3b33c4; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.promo__btn:hover { color: #3b33c4; transform: translateY(-1px); }
.promo__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); position: relative; z-index: 1; }
.promo__list li { display: flex; align-items: center; gap: var(--s-3); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-weight: 600; }
.promo__list svg { width: 20px; height: 20px; }

.chrome-ext { padding-block: var(--s-8); }
.chrome-ext__card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6); padding: var(--s-8); }
.chrome-ext__text { flex: 1 1 320px; }
.chrome-ext__text h2 { font-size: var(--fs-2xl); margin-bottom: var(--s-2); }
.chrome-ext__text p { margin: 0; }

.post-card { display: flex; flex-direction: column; gap: var(--s-2); color: var(--text); text-decoration: none; }
.post-card:hover { text-decoration: none; }
.post-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-md); margin-bottom: var(--s-2); }
.post-card h3 { margin: 0; font-size: var(--fs-lg); }
.post-card p { margin: 0; font-size: var(--fs-sm); }

.cta-band { text-align: center; padding: var(--s-12) var(--s-6); border-radius: 24px; background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); }
.cta-band h2 { max-width: 640px; margin: 0 auto var(--s-6); }
.cta-band__btn { background: var(--grad-brand); color: #fff; box-shadow: 0 8px 22px rgba(79,70,229,.35); }
.cta-band__btn:hover { color: #fff; transform: translateY(-1px); }

/* ================= AUTORYZACJA / KONTAKT ================= */
.auth { padding: var(--s-12) 0 var(--s-8); background: var(--grad-hero); }
.auth-card { max-width: 460px; margin: 0 auto; padding: var(--s-8); box-shadow: var(--shadow-lg); border-radius: 20px; }
.auth-card-wide { max-width: 720px; }
.auth-card__title { font-size: var(--fs-2xl); text-align: center; margin-bottom: var(--s-6); }
.auth-card__foot { text-align: center; margin: var(--s-4) 0 0; font-size: var(--fs-sm); }
.auth-card .btn-block { margin-top: var(--s-2); }
.auth-card .g-recaptcha { margin-bottom: var(--s-4); }
@media (max-width: 480px) { .auth-card { padding: var(--s-5); } }

/* ================= NAGŁÓWKI PODSTRON / PREMIUM / BLOG ================= */
.page-head { padding: var(--s-12) 0 var(--s-6); text-align: center; background: var(--grad-hero); }
.page-head h1 { font-size: var(--fs-3xl); margin-bottom: var(--s-3); }
.page-head p { color: var(--text-muted); font-size: var(--fs-lg); max-width: 640px; margin: 0 auto; }

.pricing-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: var(--s-8); position: relative; }
.plan__name { font-size: var(--fs-xl); margin-bottom: var(--s-2); }
.plan__price { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.03em; margin: 0 0 var(--s-5); }
.plan__price span { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.plan__list { list-style: none; padding: 0; margin: 0 0 var(--s-6); display: grid; gap: var(--s-2); flex: 1; font-size: var(--fs-sm); }
.plan__list li { position: relative; padding-left: 26px; }
.plan__list li::before { content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; border-radius: 50%; background: var(--success-soft); }
.plan__list li::after { content: ""; position: absolute; left: 5px; top: calc(.3em + 4px); width: 6px; height: 4px; border-left: 2px solid var(--success); border-bottom: 2px solid var(--success); transform: rotate(-45deg); }
.plan__list li.off { color: var(--text-muted); }
.plan__list li.off::before { background: var(--surface-2); }
.plan__list li.off::after { border: 0; width: 8px; height: 2px; left: 4px; top: calc(.3em + 7px); background: var(--text-muted); transform: none; opacity: .6; }
.plan--popular { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: translateY(-8px); }
@media (max-width: 899px) { .plan--popular { transform: none; } }
.plan__ribbon { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--grad-brand); color: #fff; font-size: .78rem; font-weight: 700; padding: 5px 14px; border-radius: var(--r-full); white-space: nowrap; box-shadow: 0 6px 14px rgba(79,70,229,.35); }

/* ================= ARTYKUŁY / STRONY ================= */
.post__meta { color: var(--text-muted); margin: 0; }
.post__cover { width: 100%; height: auto; aspect-ratio: 1200/630; object-fit: cover; border-radius: var(--r-lg); margin: var(--s-4) 0 var(--s-8); box-shadow: var(--shadow-md); }
.toc { margin-bottom: var(--s-8); padding: var(--s-5); }
.toc ol { margin: var(--s-3) 0 0; padding-left: 1.2rem; display: grid; gap: var(--s-1); font-size: var(--fs-sm); }
.toc .toc--l3 { margin-left: var(--s-4); list-style: circle; }
.prose { font-size: 1.0625rem; line-height: 1.8; overflow-wrap: anywhere; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-size: var(--fs-2xl); margin-top: var(--s-10); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.prose h3 { margin-top: var(--s-8); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.prose img { border-radius: var(--r-md); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { margin: var(--s-6) 0; padding: var(--s-3) var(--s-5); border-left: 4px solid var(--primary); background: var(--primary-soft); border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--text); }
.prose pre { background: var(--surface-2); border: 1px solid var(--border); padding: var(--s-4); border-radius: var(--r-md); overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--border); padding: var(--s-2) var(--s-3); text-align: left; }

/* ================= BŁĘDY (404 / 410) ================= */
.error-page { padding: var(--s-20) 0; text-align: center; background: var(--grad-hero); }
.error-page--standalone { min-height: 100vh; display: flex; align-items: center; }
.error-page--standalone .container { display: flex; flex-direction: column; align-items: center; }
.error-page__code { font-size: clamp(5rem, 18vw, 9rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; margin: var(--s-6) 0 var(--s-2); background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-page__title { font-size: var(--fs-3xl); }
.error-page__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-6); }

/* ================= LANDINGI /seo ================= */
.landing-page .page-title { text-align: center; padding: var(--s-12) var(--s-4) var(--s-8); background: var(--grad-hero); }
.landing-page .page-title h1 { font-size: var(--fs-3xl); max-width: 860px; margin-inline: auto; }
.landing-page .page-title p { color: var(--text-muted); font-size: var(--fs-lg); max-width: 640px; margin: 0 auto var(--s-6); }
.landing-content { padding: var(--s-8) 0 var(--s-12); }
.landing-content .container { max-width: 820px; }
.landing-content section { margin-bottom: var(--s-10); }
.landing-content h2 { font-size: var(--fs-2xl); margin-top: var(--s-8); }
.landing-content ul, .landing-content ol { padding-left: 1.25rem; display: grid; gap: var(--s-2); }
.landing-content ul { list-style: none; padding-left: 0; }
.landing-content a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }


/* ================= BLOG – kompaktowa siatka ================= */
.page-head { padding: var(--s-10) 0 var(--s-4); }
.page-head h1 { font-size: var(--fs-3xl); }
.page-head p { font-size: var(--fs-base); }
.post-card { gap: var(--s-2); padding: var(--s-4); }
.post-card__img { aspect-ratio: 16 / 9; margin-bottom: var(--s-1); }
.post-card h2, .post-card h3 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.01em; margin: 0; overflow-wrap: anywhere; hyphens: auto;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card p { font-size: .875rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card time { font-size: .78rem; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s-5); }


/* ================= RYTM PIONOWY (wpisy, strony, stopka) ================= */
.post { padding-bottom: var(--s-16); }
.post__head { padding-bottom: var(--s-4); }
.post__head h1 { max-width: 20ch; margin-inline: auto; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); text-wrap: balance; }
.post__meta { margin-top: var(--s-2); }
.post__cover { margin: var(--s-6) 0 var(--s-8); }
.prose { font-size: 1.0625rem; line-height: 1.75; }
.prose > * { margin-block: 0; }
.prose > * + * { margin-top: var(--s-4); }
.prose p, .prose ul, .prose ol { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: .4em; }
.prose h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin-top: var(--s-12); margin-bottom: var(--s-1); line-height: 1.25; }
.prose h3 { font-size: 1.2rem; margin-top: var(--s-8); margin-bottom: 0; line-height: 1.3; }
.prose h2 + *, .prose h3 + * { margin-top: var(--s-3); }
.prose > :first-child { margin-top: 0; }
.prose blockquote { margin-block: var(--s-6); }
.prose a { text-underline-offset: 3px; }
.toc { margin-bottom: var(--s-8); }
.section-alt .section-head { margin-bottom: var(--s-8); }
/* strona kończąca się pasem .section-alt nie potrzebuje dodatkowego odstępu przed stopką */
main:has(> .section-alt:last-child) ~ .site-footer { margin-top: 0; }
@media (max-width: 640px) { .post { padding-bottom: var(--s-12); } .prose h2 { margin-top: var(--s-10); } }