/*
 * Po Sprawie — subpages.css
 * Wspólny CSS podstron treściowych (Jak pomagamy + później sytuacje).
 * Złożony z deduplikowanych reguł 5 stron 'Jak pomagamy'. Reguły identyczne
 * scalone; .hero-bg różni się tłem per strona — tło i tak nadpisujemy z meta
 * hero_bg_image. NIE ładowany na stronie głównej (front-page ma własny .hero).
 */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: #3D3F43; background: #F3ECE3; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.container { max-width: 1440px; margin: 0 auto; padding: 0 56px; }
.crumb { padding: 0; margin-bottom: 16px; font-size: 13px; color: #8A857B; }
.crumb a { color: #8A857B; text-decoration: none; }
.crumb a:hover { color: #3D3F43; }
.crumb-sep { margin: 0 8px; color: #B8B0A2; }
.crumb-curr { color: #3D3F43; }
.hero { padding: 24px 0 64px;
      position: relative;
      background: transparent;
      display: flex;
      flex-direction: column;
      justify-content: flex-start; }
.quiz { position: relative; z-index: 3; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.quiz.is-lifted { box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 40px 90px -28px rgba(61,63,67,0.38), 0 12px 30px -12px rgba(61,63,67,0.2);
      transform: translateY(-2px); }
.hero > .container { position: relative; z-index: 2; }
.hero h1, .hero .lead, .hero .trust { text-shadow: 0 1px 2px rgba(243,236,227,0.6), 0 0 20px rgba(243,236,227,0.4); }
.hero-content { max-width: 820px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #6B6862; padding: 6px 14px; border: 0.5px solid rgba(0,0,0,0.12); border-radius: 100px; margin-bottom: 28px; background: rgba(255,255,255,0.6); }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #5F7355; }
h1 { font-size: 56px; line-height: 1.06; font-weight: 500; letter-spacing: -0.028em; margin: 0 0 24px; }
h1 em { font-style: normal; color: #8A857B; font-weight: 400; }
.lead { font-size: 19px; line-height: 1.55; color: #55585C; margin: 0 0 32px; max-width: 760px; }
.cta-row { display: flex; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
.cta { font-size: 15px; padding: 13px 22px; border-radius: 8px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: all 0.15s; border: 0; }
.cta-primary { background: #3D3F43; color: #fff; }
.cta-primary:hover { background: #4D5054; }
.cta-ghost { background: transparent; color: #3D3F43; border: 0.5px solid rgba(0,0,0,0.2); }
.cta-ghost:hover { background: rgba(0,0,0,0.04); }
.trust { display: flex; gap: 22px; font-size: 13px; color: #6B6862; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 6px; }
.tldr-section { padding: 64px 0; background: #fff; border-bottom: 0.5px solid rgba(0,0,0,0.06); }
.tldr-section-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.tldr-section-label { font-size: 13px; color: #8A857B; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 4px; font-weight: 500; }
.tldr-section-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tldr-fact { display: flex; flex-direction: column; gap: 6px; background: #F3ECE3; border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 20px 22px; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease; }
.tldr-fact:hover { transform: translateY(-3px); background: #fff; border-color: rgba(95,115,85,0.45); box-shadow: 0 14px 30px -14px rgba(61,63,67,0.20); }
.tldr-fact-label { font-size: 12px; color: #8A857B; letter-spacing: 0.02em; transition: color .28s ease; }
.tldr-fact:hover .tldr-fact-label { color: #5F7355; }
.tldr-fact-value { font-size: 16px; font-weight: 500; color: #3D3F43; line-height: 1.4; letter-spacing: -0.005em; }
section.s { padding: 112px 0; }
section.s-alt { background: #fff; }
section.s-dark { background: #3D3F43; color: #fff; }
.section-head { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.section-head-left { text-align: left; margin: 0 0 56px; max-width: 720px; }
.kicker { font-size: 13px; color: #6B6862; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 16px; font-weight: 500; }
.s-dark .kicker { color: #8A857B; }
h2 { font-size: 44px; line-height: 1.13; font-weight: 500; letter-spacing: -0.022em; margin: 0 0 18px; }
.section-lead { font-size: 18px; line-height: 1.55; color: #6B6862; margin: 0; }
.s-dark .section-lead { color: #B8B0A2; }
.sticky-layout { display: grid; grid-template-columns: 1fr 280px; gap: 64px; align-items: start; }
.sticky-side { position: sticky; top: 96px; background: #fff; border-radius: 14px; border: 0.5px solid rgba(0,0,0,0.1); padding: 24px; box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 16px 40px -24px rgba(0,0,0,0.1); }
.toc-title { font-size: 12px; color: #8A857B; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 14px; font-weight: 500; }
.toc { display: flex; flex-direction: column; margin: 0 0 22px; }
.toc-item { font-size: 13px; color: #6B6862; padding: 8px 0 8px 14px; line-height: 1.4; border-left: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: all 0.15s; }
.toc-item:hover { color: #3D3F43; }
.toc-item.is-active { color: #3D3F43; font-weight: 500; border-left-color: #5F7355; }
.sticky-divider { height: 0.5px; background: rgba(0,0,0,0.08); margin: 4px 0 18px; }
.sticky-cta-label { font-size: 11px; color: #8A857B; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 8px; font-weight: 500; }
.sticky-cta-text { font-size: 14px; font-weight: 500; margin: 0 0 14px; line-height: 1.4; }
.sticky-cta-btn { display: block; text-align: center; font-size: 13px; padding: 11px 16px; background: #3D3F43; color: #fff; border-radius: 7px; font-weight: 500; cursor: pointer; text-decoration: none; }
.sticky-cta-btn:hover { background: #4D5054; }
.sticky-cta-meta { font-size: 12px; color: #8A857B; text-align: center; margin: 10px 0 0; }
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.step { padding: 32px 28px; background: #F3ECE3; border-radius: 14px; border: 0.5px solid rgba(0,0,0,0.06); transition: border-color 0.15s; }
.step:hover { border-color: rgba(0,0,0,0.18); }
.step-num { font-size: 12px; color: #8A857B; font-weight: 500; letter-spacing: 0.04em; margin: 0 0 14px; text-transform: uppercase; }
.step-title { font-size: 19px; font-weight: 500; margin: 0 0 12px; letter-spacing: -0.012em; line-height: 1.25; }
.step-text { font-size: 14px; line-height: 1.6; color: #6B6862; margin: 0 0 14px; }
.step-meta { display: flex; gap: 14px; font-size: 12px; color: #8A857B; padding-top: 14px; border-top: 0.5px solid rgba(0,0,0,0.08); flex-wrap: wrap; }
.step-meta-i { display: flex; align-items: center; gap: 4px; }
.mid-cta { margin-top: 56px; padding: 32px 40px; background: #3D3F43; color: #fff; border-radius: 14px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
.mid-cta-title { font-size: 22px; font-weight: 500; margin: 0 0 6px; letter-spacing: -0.012em; line-height: 1.3; color: #fff; }
.mid-cta-text { font-size: 14px; color: #B8B0A2; margin: 0; }
.mid-cta-btn { font-size: 14px; padding: 12px 22px; background: #fff; color: #3D3F43; border-radius: 7px; font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background 0.15s; }
.mid-cta-btn:hover { background: #E9DECF; }
.docs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.doc-col { background: #F3ECE3; border-radius: 14px; padding: 28px 26px; border: 0.5px solid rgba(0,0,0,0.06); }
.doc-col-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 0.5px solid rgba(0,0,0,0.08); }
.doc-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(95,115,85,0.08); color: #5F7355; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.doc-col-title { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.doc-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.doc-item { font-size: 13px; line-height: 1.5; color: #55585C; padding-left: 22px; position: relative; }
.doc-item::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border: 1px solid #B8B0A2; border-radius: 3px; background: #fff; }
.doc-foot { margin-top: 36px; padding: 22px 28px; background: #F3ECE3; border-radius: 12px; border-left: 2px solid #5F7355; font-size: 14px; line-height: 1.6; color: #55585C; }
.doc-foot strong { font-weight: 500; color: #3D3F43; }
.errors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(0,0,0,0.08); border: 0.5px solid rgba(0,0,0,0.08); border-radius: 16px; overflow: hidden; }
.error-item { background: #F3ECE3; padding: 36px 32px; }
.error-num { font-size: 13px; color: #B0463C; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.error-num-icon { width: 18px; height: 18px; border-radius: 50%; background: rgba(217,87,68,0.1); color: #B0463C; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.error-title { font-size: 18px; font-weight: 500; margin: 0 0 10px; letter-spacing: -0.01em; line-height: 1.3; }
.error-text { font-size: 14px; line-height: 1.6; color: #6B6862; margin: 0; }
.after { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.after-item { padding: 32px 28px; background: rgba(255,255,255,0.05); border-radius: 14px; border: 0.5px solid rgba(255,255,255,0.12); }
.after-num { font-size: 36px; font-weight: 500; color: #fff; opacity: 0.4; margin: 0 0 18px; line-height: 1; letter-spacing: -0.02em; }
.after-title { font-size: 19px; font-weight: 500; color: #fff; margin: 0 0 10px; letter-spacing: -0.012em; }
.after-text { font-size: 14px; line-height: 1.6; color: #B8B0A2; margin: 0; }
.related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rel-card { background: #F3ECE3; padding: 26px 24px; border-radius: 12px; border: 0.5px solid rgba(0,0,0,0.06); cursor: pointer; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; transition: all 0.15s; }
.rel-card:hover { border-color: #3D3F43; transform: translateY(-2px); }
.rel-kicker { font-size: 11px; color: #8A857B; letter-spacing: 0.08em; text-transform: uppercase; }
.rel-title { font-size: 16px; font-weight: 500; margin: 0; letter-spacing: -0.01em; line-height: 1.3; }
.rel-link { font-size: 13px; color: #5F7355; font-weight: 500; margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 4px; }
.faq-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: start; }
.faq { display: flex; flex-direction: column; }
.faq-item { border-bottom: 0.5px solid rgba(0,0,0,0.1); }
.faq-item:first-child { border-top: 0.5px solid rgba(0,0,0,0.1); }
.faq-q { padding: 24px 0; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; cursor: pointer; user-select: none; }
.faq-q-text { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.faq-q-icon { color: #8A857B; font-size: 17px; margin-top: 3px; transition: transform 0.2s; }
.faq-item.is-open .faq-q-icon { transform: rotate(45deg); }
.faq-a { font-size: 15px; line-height: 1.65; color: #6B6862; padding: 0 60px 24px 0; display: none; }
.faq-item.is-open .faq-a { display: block; }
.faq-form { background: #F3ECE3; border-radius: 14px; padding: 32px; border: 0.5px solid rgba(0,0,0,0.08); position: sticky; top: 96px; }
.faq-form-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #5F7355; padding: 4px 12px; background: rgba(95,115,85,0.08); border-radius: 100px; margin-bottom: 16px; font-weight: 500; letter-spacing: 0.02em; }
.faq-form-eb-dot { width: 5px; height: 5px; border-radius: 50%; background: #5F7355; }
.faq-form-title { font-size: 20px; font-weight: 500; margin: 0 0 10px; letter-spacing: -0.015em; line-height: 1.3; color: #3D3F43; }
.faq-form-lead { font-size: 14px; color: #6B6862; margin: 0 0 22px; line-height: 1.55; }
.faq-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.faq-label { font-size: 12px; color: #6B6862; font-weight: 500; letter-spacing: 0.01em; }
.faq-input { font-family: inherit; font-size: 14px; padding: 11px 14px; background: #fff; border: 0.5px solid rgba(0,0,0,0.15); border-radius: 7px; color: #3D3F43; outline: none; transition: border-color 0.15s; }
.faq-input:focus { border-color: #3D3F43; }
.faq-textarea { font-family: inherit; font-size: 14px; padding: 11px 14px; background: #fff; border: 0.5px solid rgba(0,0,0,0.15); border-radius: 7px; color: #3D3F43; min-height: 110px; resize: vertical; line-height: 1.5; outline: none; transition: border-color 0.15s; }
.faq-textarea:focus { border-color: #3D3F43; }
.faq-submit { font-family: inherit; font-size: 14px; padding: 12px 18px; background: #3D3F43; color: #fff; border: 0; border-radius: 7px; font-weight: 500; cursor: pointer; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.15s; }
.faq-submit:hover { background: #4D5054; }
.faq-form-meta { font-size: 12px; color: #8A857B; text-align: center; margin: 14px 0 0; line-height: 1.5; }
.final { padding: 112px 0; background: #3D3F43; color: #fff; text-align: center; }
.final-h2 { font-size: 48px; font-weight: 500; letter-spacing: -0.025em; margin: 0 auto 18px; line-height: 1.1; max-width: 780px; color: #fff; }
.final-h2 em { font-style: normal; color: #8A857B; font-weight: 400; }
.final-lead { font-size: 17px; color: #B8B0A2; max-width: 580px; margin: 0 auto 36px; line-height: 1.55; }
.final-cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.final-inner { display: grid; grid-template-columns: 1fr 340px; gap: 72px; align-items: center; text-align: left; }
.final-inner .final-h2 { max-width: none; margin: 0 0 16px; }
.final-inner .final-lead { max-width: 520px; margin: 0 0 32px; }
.final-inner .final-cta { justify-content: flex-start; }
.final-trust { border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 24px; background: rgba(255,255,255,0.03); }
.final-trust-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.final-trust-row:first-child { padding-top: 0; }
.final-trust-row:last-child { border-bottom: 0; padding-bottom: 0; }
.final-trust-icon { color: #A4B29B; font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.final-trust-row span { font-size: 14px; color: #E7E3DB; line-height: 1.4; }
.cta-light { background: #fff; color: #3D3F43; }
.cta-light:hover { background: #E9DECF; }
.cta-ghost-dark { background: transparent; color: #fff; border: 0.5px solid rgba(255,255,255,0.25); }
.cta-ghost-dark:hover { background: rgba(255,255,255,0.06); }
.foot-link:hover { color: #3D3F43; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 80px; align-items: start; margin-top: 8px; }
.hero-content { max-width: 100%; display: flex; flex-direction: column; }
h1 { font-size: 52px; }
.quiz { background: #fff; border-radius: 18px; border: 0.5px solid rgba(0,0,0,0.08); padding: 32px; box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 32px 64px -32px rgba(0,0,0,0.12); position: relative; min-height: 460px; display: flex; flex-direction: column; }
.quiz-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.quiz-dots { display: flex; gap: 4px; }
.quiz-dot { width: 22px; height: 2px; border-radius: 1px; background: rgba(0,0,0,0.1); transition: background 0.2s; }
.quiz-dot.is-active { background: #3D3F43; }
.quiz-dot.is-done { background: #5F7355; }
.quiz-label { font-size: 12px; color: #8A857B; letter-spacing: 0.02em; }
.quiz-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #5F7355; padding: 3px 10px; background: rgba(95,115,85,0.08); border-radius: 100px; margin-bottom: 18px; font-weight: 500; letter-spacing: 0.02em; align-self: flex-start; }
.quiz-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: #5F7355; }
.quiz-title { font-size: 22px; font-weight: 500; margin: 8px 0 24px; letter-spacing: -0.015em; line-height: 1.3; }
.quiz-options { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.quiz-option { padding: 16px 20px; border: 0.5px solid rgba(0,0,0,0.12); border-radius: 10px; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: all 0.15s; font-family: inherit; text-align: left; }
.quiz-option:hover { border-color: #3D3F43; background: #F3ECE3; }
.quiz-option-text { font-size: 14px; color: #3D3F43; font-weight: 500; }
.quiz-option-sub { font-size: 12px; color: #8A857B; margin-top: 3px; }
.quiz-option-arrow { font-size: 14px; color: #8A857B; flex-shrink: 0; }
.quiz-foot { font-size: 12px; color: #6B6862; text-align: center; margin-top: 20px; padding-top: 16px; border-top: 0.5px solid rgba(0,0,0,0.08); }
.quiz-back { background: none; border: 0; color: #8A857B; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 0; margin-bottom: 12px; font-family: inherit; align-self: flex-start; }
.quiz-back:hover { color: #3D3F43; }
.quiz-result { display: flex; flex-direction: column; height: 100%; }
.quiz-result-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 18px; }
.quiz-result-icon.is-positive { background: rgba(95,115,85,0.1); color: #5F7355; }
.quiz-result-icon.is-neutral { background: rgba(217,154,68,0.1); color: #B0822E; }
.quiz-result-icon.is-cautious { background: rgba(96,116,143,0.1); color: #4A6582; }
.quiz-result-title { font-size: 22px; font-weight: 500; margin: 0 0 12px; letter-spacing: -0.015em; line-height: 1.25; }
.quiz-result-text { font-size: 14px; line-height: 1.6; color: #6B6862; margin: 0 0 24px; }
.quiz-result-cta { display: block; text-align: center; font-size: 14px; padding: 13px 18px; background: #3D3F43; color: #fff; border-radius: 8px; font-weight: 500; cursor: pointer; text-decoration: none; margin-top: auto; }
.quiz-result-cta:hover { background: #4D5054; }
.quiz-restart { background: none; border: 0; color: #8A857B; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 12px 0 0; font-family: inherit; align-self: center; }
.quiz-restart:hover { color: #3D3F43; }
.quiz-step { display: none; flex-direction: column; flex: 1; }
.quiz-step.is-active { display: flex; }
.footer { background: #F3ECE3; padding: 72px 0 32px; border-top: 0.5px solid rgba(0,0,0,0.07); }
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1.15fr 1fr 0.9fr; gap: 44px; margin-bottom: 0; padding-bottom: 52px; border-bottom: 0.5px solid rgba(0,0,0,0.09); }
.foot-brand { padding-right: 12px; }
.foot-logo-link { display: inline-block; }
.foot-logo { height: 50px; width: auto; display: block; margin-bottom: 18px; }
.foot-claim { font-size: 13px; color: #6B6862; margin: 0 0 20px; line-height: 1.6; max-width: 280px; }
.foot-contact { display: flex; flex-direction: column; gap: 6px; }
.foot-contact a { font-size: 13px; color: #6B6862; text-decoration: none; }
.foot-contact a:hover { color: #3D3F43; }
.foot-title { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: #8A857B; margin: 0 0 16px; }
.foot-links { display: flex; flex-direction: column; gap: 10px; }
.foot-link { font-size: 14px; color: #6B6862; text-decoration: none; transition: color 0.15s; }
.foot-bottom { padding-top: 26px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #8A857B; }
.foot-bottom-links a { color: #8A857B; text-decoration: none; margin-left: 22px; }
.foot-bottom-links a:hover { color: #3D3F43; }
.checklist { position: relative; z-index: 3; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.checklist.is-lifted { box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 40px 90px -28px rgba(61,63,67,0.38), 0 12px 30px -12px rgba(61,63,67,0.2);
      transform: translateY(-2px); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-top: 8px; }
.hero-content { display: flex; flex-direction: column; }
h1 { font-size: 52px; line-height: 1.06; font-weight: 500; letter-spacing: -0.028em; margin: 0 0 24px; }
.lead { font-size: 19px; line-height: 1.55; color: #55585C; margin: 0 0 32px; max-width: 95%; }
.cta { font-size: 15px; padding: 13px 22px; border-radius: 8px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: all 0.15s; border: 0; font-family: inherit; }
.checklist { background: #fff; border-radius: 18px; border: 0.5px solid rgba(0,0,0,0.08); padding: 28px; box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 32px 64px -32px rgba(0,0,0,0.12); display: flex; flex-direction: column; }
.checklist-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #5F7355; padding: 3px 10px; background: rgba(95,115,85,0.08); border-radius: 100px; margin-bottom: 14px; font-weight: 500; letter-spacing: 0.02em; align-self: flex-start; }
.checklist-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: #5F7355; }
.checklist-title { font-size: 20px; font-weight: 500; margin: 0 0 6px; letter-spacing: -0.015em; line-height: 1.3; }
.checklist-sub { font-size: 13px; color: #6B6862; margin: 0 0 22px; line-height: 1.5; }
.checklist-progress { background: #F3ECE3; border-radius: 10px; padding: 14px 16px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.checklist-progress-left { display: flex; flex-direction: column; gap: 2px; }
.checklist-progress-label { font-size: 11px; color: #8A857B; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }
.checklist-progress-count { font-size: 18px; font-weight: 500; color: #3D3F43; letter-spacing: -0.01em; }
.checklist-progress-count em { font-style: normal; color: #8A857B; font-weight: 400; font-size: 14px; }
.checklist-progress-bar { flex: 1; height: 6px; background: rgba(0,0,0,0.06); border-radius: 3px; overflow: hidden; max-width: 120px; }
.checklist-progress-fill { height: 100%; background: #5F7355; width: 0%; transition: width 0.3s; border-radius: 3px; }
.checklist-categories { display: flex; flex-direction: column; gap: 4px; }
.check-cat { background: #F3ECE3; border: 0.5px solid rgba(0,0,0,0.08); border-radius: 10px; transition: all 0.15s; overflow: hidden; }
.check-cat:hover { border-color: rgba(0,0,0,0.18); }
.check-cat-head { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
.check-cat-left { display: flex; align-items: center; gap: 12px; }
.check-cat-icon { width: 28px; height: 28px; border-radius: 7px; background: rgba(95,115,85,0.08); color: #5F7355; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.check-cat-name { font-size: 14px; font-weight: 500; color: #3D3F43; letter-spacing: -0.008em; }
.check-cat-count { font-size: 12px; color: #8A857B; }
.check-cat-chevron { color: #8A857B; font-size: 14px; transition: transform 0.2s; }
.check-cat.is-open .check-cat-chevron { transform: rotate(180deg); }
.check-cat-items { padding: 0 16px 14px; display: none; flex-direction: column; gap: 6px; }
.check-cat.is-open .check-cat-items { display: flex; }
.check-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; user-select: none; }
.check-item-box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid rgba(0,0,0,0.2); background: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.check-item.is-checked .check-item-box { background: #5F7355; border-color: #5F7355; }
.check-item-tick { color: #fff; font-size: 11px; opacity: 0; transition: opacity 0.15s; }
.check-item.is-checked .check-item-tick { opacity: 1; }
.check-item-label { font-size: 12.5px; color: #55585C; line-height: 1.4; transition: color 0.15s; }
.check-item.is-checked .check-item-label { color: #8A857B; text-decoration: line-through; }
.checklist-foot { margin-top: 20px; padding-top: 18px; border-top: 0.5px solid rgba(0,0,0,0.08); }
.checklist-cta { display: block; text-align: center; font-size: 13px; padding: 11px 16px; background: #3D3F43; color: #fff; border-radius: 7px; font-weight: 500; text-decoration: none; }
.checklist-cta:hover { background: #4D5054; }
.checklist-meta { font-size: 11px; color: #8A857B; text-align: center; margin: 10px 0 0; line-height: 1.5; }
.toc-item { font-size: 13px; color: #6B6862; padding: 8px 0 8px 14px; line-height: 1.4; border-left: 1.5px solid transparent; text-decoration: none; transition: all 0.15s; }
.sticky-cta-btn { display: block; text-align: center; font-size: 13px; padding: 11px 16px; background: #3D3F43; color: #fff; border-radius: 7px; font-weight: 500; text-decoration: none; }
.docs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.doc-col { background: #F3ECE3; border-radius: 14px; padding: 32px 28px; border: 0.5px solid rgba(0,0,0,0.06); }
.doc-col-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 0.5px solid rgba(0,0,0,0.08); }
.doc-icon { width: 36px; height: 36px; border-radius: 9px; background: rgba(95,115,85,0.08); color: #5F7355; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.doc-col-title { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.doc-col-sub { font-size: 12px; color: #8A857B; margin: 2px 0 0; }
.doc-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.doc-item { font-size: 14px; line-height: 1.5; color: #55585C; padding-left: 24px; position: relative; }
.doc-item::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border: 1px solid #B8B0A2; border-radius: 3px; background: #fff; }
.doc-item strong { color: #3D3F43; font-weight: 500; }
.doc-item-note { font-size: 12px; color: #8A857B; margin-top: 2px; display: block; }
.step { padding: 32px 28px; background: #F3ECE3; border-radius: 14px; border: 0.5px solid rgba(0,0,0,0.06); }
.step-text { font-size: 14px; line-height: 1.6; color: #6B6862; margin: 0; }
.missing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.missing-item { padding: 32px 28px; background: rgba(255,255,255,0.05); border-radius: 14px; border: 0.5px solid rgba(255,255,255,0.12); }
.missing-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(95,115,85,0.15); color: #A4B29B; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 20px; }
.missing-title { font-size: 18px; font-weight: 500; color: #fff; margin: 0 0 10px; letter-spacing: -0.012em; line-height: 1.3; }
.missing-text { font-size: 14px; line-height: 1.6; color: #B8B0A2; margin: 0; }
.mid-cta-btn { font-size: 14px; padding: 12px 22px; background: #fff; color: #3D3F43; border-radius: 7px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: background 0.15s; }
.rel-card { background: #F3ECE3; padding: 26px 24px; border-radius: 12px; border: 0.5px solid rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; transition: all 0.15s; }
.faq-form-title { font-size: 20px; font-weight: 500; margin: 0 0 10px; letter-spacing: -0.015em; line-height: 1.3; }
.faq-input, .faq-textarea { font-family: inherit; font-size: 14px; padding: 11px 14px; background: #fff; border: 0.5px solid rgba(0,0,0,0.15); border-radius: 7px; color: #3D3F43; outline: none; transition: border-color 0.15s; }
.faq-input:focus, .faq-textarea:focus { border-color: #3D3F43; }
.faq-textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.calc { position: relative; z-index: 3; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.calc.is-lifted { box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 40px 90px -28px rgba(61,63,67,0.38), 0 12px 30px -12px rgba(61,63,67,0.2);
      transform: translateY(-2px); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #6B6862; padding: 6px 14px; border: 0.5px solid rgba(0,0,0,0.12); border-radius: 100px; margin-bottom: 28px; background: rgba(255,255,255,0.6); align-self: flex-start; }
.lead { font-size: 19px; line-height: 1.55; color: #55585C; margin: 0 0 32px; max-width: 90%; }
.calc { background: #fff; border-radius: 18px; border: 0.5px solid rgba(0,0,0,0.08); padding: 32px; box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 32px 64px -32px rgba(0,0,0,0.12); display: flex; flex-direction: column; }
.calc-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #5F7355; padding: 3px 10px; background: rgba(95,115,85,0.08); border-radius: 100px; margin-bottom: 14px; font-weight: 500; letter-spacing: 0.02em; align-self: flex-start; }
.calc-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: #5F7355; }
.calc-title { font-size: 22px; font-weight: 500; margin: 0 0 6px; letter-spacing: -0.015em; line-height: 1.3; }
.calc-sub { font-size: 13px; color: #6B6862; margin: 0 0 24px; line-height: 1.5; }
.calc-field { margin-bottom: 18px; }
.calc-label { display: block; font-size: 12px; color: #6B6862; font-weight: 500; margin-bottom: 8px; letter-spacing: 0.01em; }
.calc-input-wrap { position: relative; }
.calc-input { width: 100%; font-family: inherit; font-size: 18px; font-weight: 500; padding: 14px 50px 14px 16px; background: #F3ECE3; border: 0.5px solid rgba(0,0,0,0.12); border-radius: 8px; color: #3D3F43; outline: none; transition: border-color 0.15s; -moz-appearance: textfield; }
.calc-input::-webkit-outer-spin-button, .calc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-input:focus { border-color: #3D3F43; }
.calc-input-unit { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #8A857B; font-weight: 500; pointer-events: none; }
.calc-hint { font-size: 11px; color: #8A857B; margin: 6px 0 0; }
.calc-radio-group { display: flex; flex-direction: column; gap: 6px; }
.calc-radio { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 0.5px solid rgba(0,0,0,0.12); border-radius: 8px; cursor: pointer; transition: all 0.15s; background: #fff; font-size: 13px; }
.calc-radio:hover { border-color: #3D3F43; background: #F3ECE3; }
.calc-radio input { display: none; }
.calc-radio-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,0.2); flex-shrink: 0; position: relative; transition: all 0.15s; }
.calc-radio input:checked + .calc-radio-dot { border-color: #3D3F43; }
.calc-radio input:checked + .calc-radio-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #3D3F43; }
.calc-radio-text { color: #3D3F43; font-weight: 500; }
.calc-radio.is-selected { border-color: #3D3F43; background: #F3ECE3; }
.calc-result { margin-top: 24px; padding-top: 24px; border-top: 0.5px solid rgba(0,0,0,0.08); }
.calc-result-label { font-size: 11px; color: #8A857B; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 6px; font-weight: 500; }
.calc-result-value { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 4px; line-height: 1.1; }
.calc-result-value em { font-style: normal; color: #8A857B; font-weight: 400; font-size: 18px; margin-left: 4px; }
.calc-result-sub { font-size: 12px; color: #8A857B; margin: 0; }
.calc-breakdown { margin: 16px 0 0; display: flex; flex-direction: column; gap: 6px; }
.calc-bd-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 12px; }
.calc-bd-label { color: #6B6862; }
.calc-bd-value { color: #3D3F43; font-weight: 500; }
.calc-bd-row.is-total { padding-top: 12px; border-top: 0.5px solid rgba(0,0,0,0.08); font-weight: 500; }
.calc-bd-row.is-total .calc-bd-label, .calc-bd-row.is-total .calc-bd-value { color: #3D3F43; font-size: 13px; }
.calc-cta { display: block; text-align: center; margin-top: 20px; font-size: 13px; padding: 11px 16px; background: #3D3F43; color: #fff; border-radius: 7px; font-weight: 500; text-decoration: none; }
.calc-cta:hover { background: #4D5054; }
.calc-foot { font-size: 11px; color: #8A857B; text-align: center; margin: 12px 0 0; line-height: 1.5; }
.breakdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bd-card { padding: 32px 28px; background: #F3ECE3; border-radius: 14px; border: 0.5px solid rgba(0,0,0,0.06); display: flex; flex-direction: column; }
.bd-card-num { font-size: 12px; color: #8A857B; font-weight: 500; letter-spacing: 0.04em; margin: 0 0 14px; text-transform: uppercase; }
.bd-card-title { font-size: 20px; font-weight: 500; margin: 0 0 10px; letter-spacing: -0.012em; line-height: 1.3; }
.bd-card-price { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 4px; color: #3D3F43; }
.bd-card-price em { font-style: normal; color: #8A857B; font-weight: 400; font-size: 16px; }
.bd-card-price-sub { font-size: 12px; color: #8A857B; margin: 0 0 18px; }
.bd-card-text { font-size: 14px; line-height: 1.6; color: #6B6862; margin: 0; flex: 1; }
.bd-card-foot { margin-top: 18px; padding-top: 16px; border-top: 0.5px solid rgba(0,0,0,0.08); font-size: 12px; color: #8A857B; line-height: 1.5; }
.total-panel { margin-top: 32px; padding: 32px 40px; background: #fff; border-radius: 14px; border: 0.5px solid rgba(0,0,0,0.1); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
.total-label { font-size: 13px; color: #8A857B; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 6px; font-weight: 500; }
.total-value { font-size: 32px; font-weight: 500; letter-spacing: -0.022em; line-height: 1; margin: 0; }
.total-value em { font-style: normal; color: #8A857B; font-weight: 400; font-size: 18px; margin-left: 6px; }
.factors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.factor { padding: 28px 30px; background: #F3ECE3; border-radius: 12px; border: 0.5px solid rgba(0,0,0,0.06); display: flex; gap: 18px; align-items: flex-start; }
.factor-icon { width: 36px; height: 36px; border-radius: 9px; background: rgba(95,115,85,0.08); color: #5F7355; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.factor-title { font-size: 16px; font-weight: 500; margin: 0 0 6px; letter-spacing: -0.01em; line-height: 1.3; }
.factor-text { font-size: 13px; line-height: 1.6; color: #6B6862; margin: 0; }
.sp-card { padding: 40px 48px; background: #3D3F43; color: #fff; border-radius: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.sp-card-title { font-size: 24px; font-weight: 500; margin: 0 0 14px; letter-spacing: -0.015em; line-height: 1.25; color: #fff; }
.sp-card-text { font-size: 15px; line-height: 1.65; color: #B8B0A2; margin: 0; }
.sp-card-list { display: flex; flex-direction: column; gap: 14px; }
.sp-li { display: flex; gap: 14px; align-items: flex-start; }
.sp-li-icon { width: 24px; height: 24px; border-radius: 50%; background: rgba(95,115,85,0.15); color: #A4B29B; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; margin-top: 1px; }
.sp-li-text { font-size: 14px; line-height: 1.55; color: #fff; }
.faq-submit { font-family: inherit; font-size: 14px; padding: 12px 18px; background: #3D3F43; color: #fff; border: 0; border-radius: 7px; font-weight: 500; cursor: pointer; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pcalc { position: relative; z-index: 3; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.pcalc.is-lifted { box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 40px 90px -28px rgba(61,63,67,0.38), 0 12px 30px -12px rgba(61,63,67,0.2);
      transform: translateY(-2px); }
.pcalc { background: #fff; border-radius: 18px; border: 0.5px solid rgba(0,0,0,0.08); padding: 32px; box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 32px 64px -32px rgba(0,0,0,0.12); }
.pcalc-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #5F7355; padding: 3px 10px; background: rgba(95,115,85,0.08); border-radius: 100px; margin-bottom: 14px; font-weight: 500; letter-spacing: 0.02em; }
.pcalc-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: #5F7355; }
.pcalc-title { font-size: 22px; font-weight: 500; margin: 0 0 8px; letter-spacing: -0.015em; line-height: 1.3; }
.pcalc-sub { font-size: 13px; color: #6B6862; margin: 0 0 22px; line-height: 1.5; }
.pcalc-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.pcalc-label { font-size: 12px; color: #6B6862; font-weight: 500; }
.pcalc-input { font-family: inherit; font-size: 15px; padding: 12px 14px; background: #F3ECE3; border: 0.5px solid rgba(0,0,0,0.12); border-radius: 8px; color: #3D3F43; outline: none; }
.pcalc-input:focus { border-color: #3D3F43; background: #fff; }
.pcalc-radio-group { display: flex; flex-direction: column; gap: 8px; }
.pcalc-radio { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 12px 14px; background: #F3ECE3; border: 0.5px solid rgba(0,0,0,0.08); border-radius: 8px; cursor: pointer; transition: all 0.15s; align-items: center; }
.pcalc-radio:hover { border-color: rgba(0,0,0,0.18); }
.pcalc-radio.is-active { background: #fff; border-color: #3D3F43; }
.pcalc-radio-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,0.2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.pcalc-radio.is-active .pcalc-radio-dot { border-color: #3D3F43; }
.pcalc-radio.is-active .pcalc-radio-dot::after { content: ""; width: 8px; height: 8px; background: #3D3F43; border-radius: 50%; }
.pcalc-radio-text { font-size: 13px; font-weight: 500; }
.pcalc-radio-sub { font-size: 11px; color: #8A857B; }
.pcalc-result { background: linear-gradient(135deg, #F3ECE3, #fff); border-radius: 12px; padding: 20px; margin-top: 18px; border: 0.5px solid rgba(95,115,85,0.3); }
.pcalc-result-label { font-size: 11px; color: #8A857B; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin: 0 0 6px; }
.pcalc-result-value { font-size: 28px; font-weight: 500; color: #3D3F43; margin: 0 0 4px; letter-spacing: -0.02em; }
.pcalc-result-note { font-size: 12px; color: #6B6862; margin: 6px 0 0; line-height: 1.5; }
.pcalc-foot { margin-top: 18px; padding-top: 18px; border-top: 0.5px solid rgba(0,0,0,0.08); }
.pcalc-cta { display: block; text-align: center; font-size: 13px; padding: 11px 16px; background: #3D3F43; color: #fff; border-radius: 7px; font-weight: 500; text-decoration: none; }
.pcalc-cta:hover { background: #4D5054; }
.pcalc-meta { font-size: 11px; color: #8A857B; text-align: center; margin: 10px 0 0; line-height: 1.5; }
.factors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.factor { padding: 32px 28px; background: #F3ECE3; border-radius: 14px; border: 0.5px solid rgba(0,0,0,0.06); }
.factor-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(95,115,85,0.08); color: #5F7355; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 18px; }
.factor-title { font-size: 19px; font-weight: 500; margin: 0 0 10px; letter-spacing: -0.012em; line-height: 1.3; }
.factor-text { font-size: 14px; line-height: 1.65; color: #6B6862; margin: 0; }
.factor-text strong { color: #3D3F43; font-weight: 500; }
.scenarios { display: flex; flex-direction: column; gap: 24px; max-width: 1080px; margin: 0 auto; }
.scenario { background: #F3ECE3; border-radius: 16px; padding: 40px 48px; border: 0.5px solid rgba(0,0,0,0.06); display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: start; }
.scenario.is-green { border-left: 3px solid #5F7355; }
.scenario.is-yellow { border-left: 3px solid #B0822E; }
.scenario.is-orange { border-left: 3px solid #B0463C; }
.scenario-num { font-size: 12px; color: #8A857B; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin: 0 0 8px; }
.scenario-title { font-size: 24px; font-weight: 500; margin: 0 0 14px; letter-spacing: -0.018em; line-height: 1.2; }
.scenario-summary { font-size: 14px; line-height: 1.6; color: #6B6862; margin: 0; }
.scenario-body p { font-size: 15px; line-height: 1.7; color: #55585C; margin: 0 0 14px; }
.scenario-body p:last-child { margin: 0; }
.scenario-body strong { color: #3D3F43; font-weight: 500; }
.scenario-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 0.5px solid rgba(0,0,0,0.08); }
.scenario-meta-label { font-size: 11px; color: #8A857B; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }
.scenario-meta-val { font-size: 14px; font-weight: 500; color: #3D3F43; margin-top: 4px; }
.nope { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nope-item { padding: 32px 28px; background: rgba(255,255,255,0.05); border-radius: 14px; border: 0.5px solid rgba(255,255,255,0.12); }
.nope-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(95,115,85,0.15); color: #A4B29B; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 20px; }
.nope-title { font-size: 18px; font-weight: 500; color: #fff; margin: 0 0 10px; letter-spacing: -0.012em; line-height: 1.3; }
.nope-text { font-size: 14px; line-height: 1.65; color: #B8B0A2; margin: 0; }
.mid-cta-btn { font-size: 14px; padding: 12px 22px; background: #fff; color: #3D3F43; border-radius: 7px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.compare { position: relative; z-index: 3; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.compare.is-lifted { box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 40px 90px -28px rgba(61,63,67,0.38), 0 12px 30px -12px rgba(61,63,67,0.2);
      transform: translateY(-2px); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-top: 8px; }
.compare { background: #fff; border-radius: 18px; border: 0.5px solid rgba(0,0,0,0.08); padding: 28px; box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 32px 64px -32px rgba(0,0,0,0.12); display: flex; flex-direction: column; }
.compare-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #5F7355; padding: 3px 10px; background: rgba(95,115,85,0.08); border-radius: 100px; margin-bottom: 14px; font-weight: 500; letter-spacing: 0.02em; align-self: flex-start; }
.compare-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: #5F7355; }
.compare-title { font-size: 20px; font-weight: 500; margin: 0 0 6px; letter-spacing: -0.015em; line-height: 1.3; }
.compare-sub { font-size: 13px; color: #6B6862; margin: 0 0 22px; line-height: 1.5; }
.compare-row { display: grid; grid-template-columns: 1.3fr 0.8fr 0.7fr 1.1fr; gap: 10px; padding: 12px 0; border-bottom: 0.5px solid rgba(0,0,0,0.06); align-items: center; }
.compare-row:first-of-type { padding-top: 0; }
.compare-row.is-header { border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 10px; font-size: 10px; color: #8A857B; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.compare-row.is-last { border-bottom: 0; }
.compare-method { font-size: 13px; font-weight: 500; color: #3D3F43; }
.compare-method-sub { font-size: 11px; color: #8A857B; margin-top: 2px; }
.compare-cell { font-size: 12px; color: #6B6862; line-height: 1.4; }
.compare-cell strong { color: #3D3F43; font-weight: 500; }
.compare-foot { margin-top: 22px; padding-top: 20px; border-top: 0.5px solid rgba(0,0,0,0.08); }
.compare-foot-text { font-size: 12px; color: #8A857B; margin: 0 0 14px; line-height: 1.5; text-align: center; }
.compare-cta { display: block; text-align: center; font-size: 13px; padding: 11px 16px; background: #3D3F43; color: #fff; border-radius: 7px; font-weight: 500; text-decoration: none; }
.compare-row[data-row] { cursor: pointer; border-radius: 8px; padding: 12px 10px; margin: 0 -10px; transition: background 0.15s; position: relative; }
.compare-row[data-row]:hover { background: rgba(95,115,85,0.05); }
.compare-row.is-selected { background: rgba(95,115,85,0.08); }
.compare-detail { display: none; grid-column: 1 / -1; padding: 4px 0 14px; }
.compare-detail.is-open { display: block; animation: cmpSlide 0.25s ease; }
.compare-detail-inner { background: #F3ECE3; border-left: 3px solid #5F7355; border-radius: 8px; padding: 14px 16px; }
.compare-detail-line { font-size: 12px; line-height: 1.5; color: #6B6862; display: flex; align-items: flex-start; gap: 7px; margin-bottom: 6px; }
.compare-detail-line:last-child { margin-bottom: 0; }
.compare-detail-line i { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.compare-detail-line.cd-for i { color: #5F7355; }
.compare-detail-line.cd-pro i { color: #5F7355; }
.compare-detail-line.cd-con i { color: #B0822E; }
.compare-detail-line strong { color: #3D3F43; font-weight: 600; }
.compare-cta:hover { background: #4D5054; }
.intro-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.intro-h2 { font-size: 36px; line-height: 1.15; font-weight: 500; letter-spacing: -0.022em; margin: 0 0 20px; }
.intro-body { font-size: 17px; line-height: 1.7; color: #55585C; }
.intro-body p { margin: 0 0 18px; }
.intro-body strong { font-weight: 500; color: #3D3F43; }
.methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.method { padding: 36px 32px; background: #F3ECE3; border-radius: 14px; border: 0.5px solid rgba(0,0,0,0.06); display: flex; flex-direction: column; transition: border-color 0.15s; }
.method:hover { border-color: rgba(0,0,0,0.18); }
.method-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.method-num { font-size: 12px; color: #8A857B; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.method-badge { font-size: 11px; padding: 4px 10px; border-radius: 100px; font-weight: 500; letter-spacing: 0.02em; }
.method-badge.is-light { background: rgba(0,0,0,0.05); color: #6B6862; }
.method-badge.is-strong { background: rgba(95,115,85,0.1); color: #47553F; }
.method-title { font-size: 22px; font-weight: 500; margin: 0 0 12px; letter-spacing: -0.015em; line-height: 1.25; }
.method-text { font-size: 15px; line-height: 1.6; color: #6B6862; margin: 0 0 22px; }
.method-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: auto; padding-top: 22px; border-top: 0.5px solid rgba(0,0,0,0.08); }
.method-meta-label { font-size: 11px; color: #8A857B; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 4px; font-weight: 500; }
.method-meta-val { font-size: 13px; font-weight: 500; color: #3D3F43; }
.decision-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.decision { padding: 32px 30px; background: rgba(255,255,255,0.05); border-radius: 14px; border: 0.5px solid rgba(255,255,255,0.12); }
.decision-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(95,115,85,0.15); color: #A4B29B; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 20px; }
.decision-q { font-size: 17px; font-weight: 500; color: #fff; margin: 0 0 10px; letter-spacing: -0.012em; line-height: 1.3; }
.decision-a { font-size: 14px; line-height: 1.65; color: #B8B0A2; margin: 0 0 18px; }
.decision-recommend { padding-top: 16px; border-top: 0.5px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; gap: 4px; }
.decision-recommend-label { font-size: 10px; color: #8A857B; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.decision-recommend-val { font-size: 14px; color: #fff; font-weight: 500; }
.warnings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(0,0,0,0.08); border: 0.5px solid rgba(0,0,0,0.08); border-radius: 16px; overflow: hidden; }
.warning { background: #F3ECE3; padding: 36px 32px; }
.warning-num { font-size: 13px; color: #B0463C; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.warning-icon { width: 18px; height: 18px; border-radius: 50%; background: rgba(217,87,68,0.1); color: #B0463C; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.warning-title { font-size: 18px; font-weight: 500; margin: 0 0 10px; letter-spacing: -0.01em; line-height: 1.3; }
.warning-text { font-size: 14px; line-height: 1.6; color: #6B6862; margin: 0; }

/* --- Media queries (responsywność podstron) --- */
@media (max-width: 768px) {
      .final-inner { grid-template-columns: 1fr; gap: 28px; text-align: center; }
      .final-inner .final-h2 { margin-left: auto; margin-right: auto; }
      .final-inner .final-lead { margin-left: auto; margin-right: auto; }
      .final-inner .final-cta { justify-content: center; }
    }
@media (max-width: 1024px) {
      .container { padding: 0 32px; }
      .hero, section.s, .final { padding: 64px 0; }
      h1 { font-size: 40px; }
      h2 { font-size: 28px; }
      .final-h2 { font-size: 32px; }
      .hero-grid { grid-template-columns: 1fr; gap: 40px; }
      .quiz { min-height: auto; }
      .tldr-section { padding: 48px 0; }
      .tldr-section-grid { grid-template-columns: 1fr; gap: 24px; }
      .tldr-section-facts { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .sticky-layout { grid-template-columns: 1fr; gap: 32px; }
      .sticky-side { position: static; }
      .faq-layout { grid-template-columns: 1fr; gap: 40px; }
      .faq-form { position: static; }
      .docs-grid { grid-template-columns: repeat(2, 1fr); }
      .after, .related { grid-template-columns: 1fr 1fr; }
      .mid-cta { grid-template-columns: 1fr; text-align: center; }
    }
@media (max-width: 720px) {
      .container { padding: 0 20px; }
      h1 { font-size: 32px; }
      h2 { font-size: 24px; }
      .lead { font-size: 16px; }
      .tldr-section-facts { grid-template-columns: 1fr; gap: 20px; }
      .steps, .docs-grid, .errors, .after, .related { grid-template-columns: 1fr; }
    }
@media (max-width: 1024px) {
      .container { padding: 0 32px; }
      .hero, section.s, .final { padding: 64px 0; }
      h1 { font-size: 40px; }
      h2 { font-size: 28px; }
      .final-h2 { font-size: 32px; }
      .hero-grid { grid-template-columns: 1fr; gap: 40px; }
      .tldr-section { padding: 48px 0; }
      .tldr-section-grid { grid-template-columns: 1fr; gap: 24px; }
      .tldr-section-facts { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .sticky-layout { grid-template-columns: 1fr; gap: 32px; }
      .sticky-side { position: static; }
      .docs-grid { grid-template-columns: 1fr; }
      .missing, .related { grid-template-columns: repeat(2, 1fr); }
      .mid-cta { grid-template-columns: 1fr; text-align: center; }
      .faq-layout { grid-template-columns: 1fr; gap: 40px; }
      .faq-form { position: static; }
    }
@media (max-width: 720px) {
      .container { padding: 0 20px; }
      h1 { font-size: 32px; }
      h2 { font-size: 24px; }
      .tldr-section-facts { grid-template-columns: 1fr; gap: 20px; }
      .steps, .errors, .missing, .related { grid-template-columns: 1fr; }
    }
@media (max-width: 1024px) {
      .container { padding: 0 32px; }
      .hero, section.s, .final { padding: 64px 0; }
      h1 { font-size: 40px; }
      h2 { font-size: 28px; }
      .final-h2 { font-size: 32px; }
      .hero-grid { grid-template-columns: 1fr; gap: 40px; }
      .tldr-section { padding: 48px 0; }
      .tldr-section-grid { grid-template-columns: 1fr; gap: 24px; }
      .tldr-section-facts { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .sticky-layout { grid-template-columns: 1fr; gap: 32px; }
      .sticky-side { position: static; }
      .breakdown, .factors { grid-template-columns: repeat(2, 1fr); }
      .related { grid-template-columns: repeat(2, 1fr); }
      .sp-card { grid-template-columns: 1fr; gap: 32px; padding: 32px; }
      .mid-cta, .total-panel { grid-template-columns: 1fr; text-align: center; }
      .faq-layout { grid-template-columns: 1fr; gap: 40px; }
      .faq-form { position: static; }
    }
@media (max-width: 720px) {
      .container { padding: 0 20px; }
      h1 { font-size: 32px; }
      h2 { font-size: 24px; }
      .tldr-section-facts { grid-template-columns: 1fr; gap: 20px; }
      .breakdown, .factors, .related { grid-template-columns: 1fr; }
    }
@media (max-width: 1024px) {
      .container { padding: 0 32px; }
      .hero { height: auto; padding: 24px 0 64px; }
      section.s, .final { padding: 64px 0; }
      h1 { font-size: 40px; }
      h2 { font-size: 28px; }
      .final-h2 { font-size: 32px; }
      .hero-grid { grid-template-columns: 1fr; gap: 40px; }
      .tldr-section { padding: 48px 0; }
      .tldr-section-grid { grid-template-columns: 1fr; gap: 24px; }
      .tldr-section-facts { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .factors { grid-template-columns: 1fr; }
      .scenario { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
      .nope, .related { grid-template-columns: repeat(2, 1fr); }
      .mid-cta { grid-template-columns: 1fr; text-align: center; }
      .faq-layout { grid-template-columns: 1fr; gap: 40px; }
      .faq-form { position: static; }
    }
@media (max-width: 720px) {
      .container { padding: 0 20px; }
      h1 { font-size: 32px; }
      h2 { font-size: 24px; }
      .tldr-section-facts, .nope, .related { grid-template-columns: 1fr; }
    }
@keyframes cmpSlide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1024px) {
      .container { padding: 0 32px; }
      .hero, section.s, .final { padding: 64px 0; }
      h1 { font-size: 40px; }
      h2 { font-size: 28px; }
      .intro-h2 { font-size: 26px; }
      .final-h2 { font-size: 32px; }
      .hero-grid { grid-template-columns: 1fr; gap: 40px; }
      .intro-grid { grid-template-columns: 1fr; gap: 32px; }
      .tldr-section { padding: 48px 0; }
      .tldr-section-grid { grid-template-columns: 1fr; gap: 24px; }
      .tldr-section-facts { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .sticky-layout { grid-template-columns: 1fr; gap: 32px; }
      .sticky-side { position: static; }
      .decision-grid, .related { grid-template-columns: repeat(2, 1fr); }
      .mid-cta { grid-template-columns: 1fr; text-align: center; }
      .faq-layout { grid-template-columns: 1fr; gap: 40px; }
      .faq-form { position: static; }
    }
@media (max-width: 720px) {
      .container { padding: 0 20px; }
      h1 { font-size: 32px; }
      h2 { font-size: 24px; }
      .tldr-section-facts { grid-template-columns: 1fr; gap: 20px; }
      .compare-row { grid-template-columns: 1fr 1fr; gap: 8px; }
      .compare-row.is-header { display: none; }
      .methods, .decision-grid, .warnings, .related { grid-template-columns: 1fr; }
    }


/* ============================================================
   SYTUACJE ŻYCIOWE (/twoja-sytuacja/) — widgety hero + sekcje
   Dodane przy module cpt-sytuacja. Dedup względem reguł powyżej.
   ============================================================ */

.ktime { position: relative; z-index: 3; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.ktime.is-lifted { box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 40px 90px -28px rgba(61,63,67,0.38), 0 12px 30px -12px rgba(61,63,67,0.2);
      transform: translateY(-2px); }
.ktime { background: #fff; border-radius: 18px; border: 0.5px solid rgba(0,0,0,0.08); padding: 32px; box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 32px 64px -32px rgba(0,0,0,0.12); display: flex; flex-direction: column; }
.ktime-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #5F7355; padding: 3px 10px; background: rgba(95,115,85,0.08); border-radius: 100px; margin-bottom: 14px; font-weight: 500; letter-spacing: 0.02em; align-self: flex-start; }
.ktime-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: #5F7355; }
.ktime-title { font-size: 20px; font-weight: 500; margin: 0 0 6px; letter-spacing: -0.015em; line-height: 1.3; }
.ktime-sub { font-size: 13px; color: #6B6862; margin: 0 0 24px; line-height: 1.5; }
.ktime-stages { display: flex; flex-direction: column; gap: 0; position: relative; }
.ktime-stage { display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding: 14px 0; position: relative; }
.ktime-stage:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 38px; bottom: -4px; width: 1.5px; background: rgba(0,0,0,0.1); }
.ktime-stage.is-active:not(:last-child)::after { background: linear-gradient(180deg, #B0463C 0%, #B0463C 50%, rgba(0,0,0,0.1) 50%); }
.ktime-dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; position: relative; z-index: 1; }
.ktime-dot.is-red { background: rgba(217,87,68,0.1); color: #B0463C; border: 1.5px solid #B0463C; }
.ktime-dot.is-yellow { background: rgba(217,154,68,0.1); color: #B0822E; border: 1.5px solid #B0822E; }
.ktime-dot.is-green { background: rgba(95,115,85,0.1); color: #5F7355; border: 1.5px solid #5F7355; }
.ktime-content { padding-top: 4px; }
.ktime-when { font-size: 11px; color: #8A857B; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 4px; }
.ktime-what { font-size: 15px; font-weight: 500; color: #3D3F43; margin: 0 0 6px; letter-spacing: -0.008em; line-height: 1.3; }
.ktime-detail { font-size: 13px; line-height: 1.55; color: #6B6862; margin: 0; }
.ktime-detail strong { color: #3D3F43; font-weight: 500; }
.ktime-foot { margin-top: 24px; padding-top: 20px; border-top: 0.5px solid rgba(0,0,0,0.08); }
.ktime-cta { display: block; text-align: center; font-size: 13px; padding: 11px 16px; background: #3D3F43; color: #fff; border-radius: 7px; font-weight: 500; text-decoration: none; }
.ktime-cta:hover { background: #4D5054; }
.ktime-meta { font-size: 11px; color: #8A857B; text-align: center; margin: 10px 0 0; line-height: 1.5; }
.tslider { margin: 8px 0 24px; }
.tslider-track { position: relative; height: 6px; background: #ECE4D8; border-radius: 100px; margin: 0 8px 0; }
.tslider-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 100px; background: linear-gradient(90deg, #B0463C 0%, #B0822E 50%, #5F7355 100%); transition: width 0.35s cubic-bezier(.4,0,.2,1); width: 0%; }
.tslider-steps { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; }
.tslider-step { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #D9CFC0; cursor: pointer; transition: border-color 0.25s, transform 0.2s; z-index: 2; }
.tslider-step.is-reached { border-color: #5F7355; }
.tslider-step.is-current { transform: scale(1.35); box-shadow: 0 0 0 4px rgba(95,115,85,0.15); }
.tslider-labels { display: flex; justify-content: space-between; margin-top: 12px; }
.tslider-label { font-size: 11px; color: #8A857B; font-weight: 500; cursor: pointer; text-align: center; width: 33%; transition: color 0.2s; letter-spacing: 0.01em; }
.tslider-label:first-child { text-align: left; }
.tslider-label:last-child { text-align: right; }
.tslider-label.is-current { color: #3D3F43; font-weight: 600; }
.tslider-panel { margin-top: 22px; background: #F3ECE3; border-radius: 12px; padding: 22px; border-left: 3px solid #5F7355; transition: border-color 0.3s; min-height: 150px; }
.tslider-panel.tone-red { border-left-color: #B0463C; background: rgba(176,70,60,0.05); }
.tslider-panel.tone-yellow { border-left-color: #B0822E; background: rgba(176,130,46,0.06); }
.tslider-panel.tone-green { border-left-color: #5F7355; background: rgba(95,115,85,0.06); }
.tslider-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tslider-panel-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.tone-red .tslider-panel-icon { background: rgba(176,70,60,0.12); color: #B0463C; }
.tone-yellow .tslider-panel-icon { background: rgba(176,130,46,0.14); color: #B0822E; }
.tone-green .tslider-panel-icon { background: rgba(95,115,85,0.14); color: #5F7355; }
.tslider-panel-when { font-size: 11px; color: #8A857B; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; }
.tslider-panel-what { font-size: 16px; font-weight: 600; color: #3D3F43; margin: 0; letter-spacing: -0.01em; line-height: 1.3; }
.tslider-panel-detail { font-size: 13px; line-height: 1.6; color: #6B6862; margin: 0; }
.tslider-hint { font-size: 11px; color: #8A857B; text-align: center; margin: 14px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.tslider-hint i { font-size: 13px; }
.canseize { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.seize-col { background: #F3ECE3; border-radius: 14px; padding: 36px 32px; border: 0.5px solid rgba(0,0,0,0.06); }
.seize-col.is-can { border-left: 3px solid #B0463C; }
.seize-col.is-cant { border-left: 3px solid #5F7355; }
.seize-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.seize-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.seize-icon.is-red { background: rgba(217,87,68,0.1); color: #B0463C; }
.seize-icon.is-green { background: rgba(95,115,85,0.1); color: #5F7355; }
.seize-title { font-size: 19px; font-weight: 500; margin: 0; letter-spacing: -0.012em; }
.seize-list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.seize-li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: #55585C; }
.seize-li-icon { color: #8A857B; font-size: 14px; margin-top: 2px; flex-shrink: 0; }
.seize-li strong { color: #3D3F43; font-weight: 500; }
.stages-block { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stage-block { padding: 36px 28px; background: rgba(255,255,255,0.05); border-radius: 14px; border: 0.5px solid rgba(255,255,255,0.12); }
.stage-num { font-size: 13px; color: #8A857B; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin: 0 0 16px; }
.stage-block.is-key .stage-num { color: #A4B29B; }
.stage-when { font-size: 21px; font-weight: 500; color: #fff; margin: 0 0 10px; letter-spacing: -0.015em; line-height: 1.3; }
.stage-text { font-size: 14px; line-height: 1.65; color: #B8B0A2; margin: 0; }
.qa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.qa-card { padding: 32px 28px; background: #F3ECE3; border-radius: 14px; border: 0.5px solid rgba(0,0,0,0.06); }
.qa-q { font-size: 18px; font-weight: 500; margin: 0 0 12px; letter-spacing: -0.012em; line-height: 1.3; }
.qa-a { font-size: 14px; line-height: 1.65; color: #6B6862; margin: 0; }
.qa-a strong { color: #3D3F43; font-weight: 500; }
.quiz { background: #fff; border-radius: 18px; border: 0.5px solid rgba(0,0,0,0.08); padding: 32px; box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 32px 64px -32px rgba(0,0,0,0.12); display: flex; flex-direction: column; min-height: 460px; }
.quiz-result { display: flex; flex-direction: column; flex: 1; }
.quiz-result-icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(95,115,85,0.1); color: #5F7355; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 18px; }
.quiz-result-eyebrow { font-size: 11px; color: #8A857B; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; margin: 0 0 8px; }
.quiz-result-title { font-size: 20px; font-weight: 500; margin: 0 0 12px; letter-spacing: -0.015em; line-height: 1.25; }
.quiz-result-text { font-size: 14px; line-height: 1.6; color: #6B6862; margin: 0 0 22px; }
.quiz-result-cta { display: block; text-align: center; font-size: 14px; padding: 12px 18px; background: #3D3F43; color: #fff; border-radius: 8px; font-weight: 500; cursor: pointer; text-decoration: none; margin-top: auto; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step3 { padding: 36px 32px; background: #F3ECE3; border-radius: 14px; border: 0.5px solid rgba(0,0,0,0.06); }
.step3-num { font-size: 36px; font-weight: 500; color: #3D3F43; opacity: 0.2; margin: 0 0 14px; line-height: 1; letter-spacing: -0.02em; }
.step3-title { font-size: 20px; font-weight: 500; margin: 0 0 12px; letter-spacing: -0.015em; line-height: 1.3; }
.step3-text { font-size: 14px; line-height: 1.6; color: #6B6862; margin: 0; }
.ways { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.way { padding: 32px 30px; background: #F3ECE3; border-radius: 14px; border: 0.5px solid rgba(0,0,0,0.06); }
.way-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.way-icon { width: 36px; height: 36px; border-radius: 9px; background: rgba(95,115,85,0.08); color: #5F7355; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.way-badge { font-size: 11px; padding: 4px 10px; border-radius: 100px; background: rgba(0,0,0,0.05); color: #6B6862; font-weight: 500; letter-spacing: 0.02em; }
.way-title { font-size: 20px; font-weight: 500; margin: 0 0 10px; letter-spacing: -0.012em; line-height: 1.25; }
.way-text { font-size: 14px; line-height: 1.65; color: #6B6862; margin: 0 0 18px; }
.way-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 16px; border-top: 0.5px solid rgba(0,0,0,0.08); }
.way-meta-label { font-size: 11px; color: #8A857B; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 2px; font-weight: 500; }
.way-meta-val { font-size: 13px; font-weight: 500; color: #3D3F43; }
.dont { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dont-item { padding: 32px 28px; background: rgba(255,255,255,0.05); border-radius: 14px; border: 0.5px solid rgba(255,255,255,0.12); }
.dont-icon { width: 36px; height: 36px; border-radius: 9px; background: rgba(217,87,68,0.15); color: #E5816F; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 20px; }
.dont-title { font-size: 18px; font-weight: 500; color: #fff; margin: 0 0 10px; letter-spacing: -0.012em; line-height: 1.3; }
.dont-text { font-size: 14px; line-height: 1.6; color: #B8B0A2; margin: 0; }
.scen { position: relative; z-index: 3; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.scen.is-lifted { box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 40px 90px -28px rgba(61,63,67,0.38), 0 12px 30px -12px rgba(61,63,67,0.2);
      transform: translateY(-2px); }
.scen { background: #fff; border-radius: 18px; border: 0.5px solid rgba(0,0,0,0.08); padding: 32px; box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 32px 64px -32px rgba(0,0,0,0.12); display: flex; flex-direction: column; }
.scen-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #5F7355; padding: 3px 10px; background: rgba(95,115,85,0.08); border-radius: 100px; margin-bottom: 14px; font-weight: 500; letter-spacing: 0.02em; align-self: flex-start; }
.scen-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: #5F7355; }
.scen-title { font-size: 20px; font-weight: 500; margin: 0 0 6px; letter-spacing: -0.015em; line-height: 1.3; }
.scen-sub { font-size: 13px; color: #6B6862; margin: 0 0 22px; line-height: 1.5; }
.scen-list { display: flex; flex-direction: column; gap: 10px; }
.scen-item { background: #F3ECE3; border-radius: 10px; padding: 18px 20px; border: 0.5px solid rgba(0,0,0,0.06); display: grid; grid-template-columns: 38px 1fr auto; gap: 14px; align-items: center; }
.scen-icon { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.scen-icon.is-green { background: rgba(95,115,85,0.1); color: #5F7355; }
.scen-icon.is-yellow { background: rgba(217,154,68,0.1); color: #B0822E; }
.scen-icon.is-orange { background: rgba(217,87,68,0.08); color: #B0463C; }
.scen-info { min-width: 0; }
.scen-name { font-size: 14px; font-weight: 500; color: #3D3F43; margin: 0 0 2px; letter-spacing: -0.008em; }
.scen-desc { font-size: 12px; color: #6B6862; margin: 0; line-height: 1.4; }
.scen-badge { font-size: 11px; padding: 4px 10px; border-radius: 100px; font-weight: 500; letter-spacing: 0.02em; flex-shrink: 0; }
.scen-badge.is-green { background: rgba(95,115,85,0.1); color: #47553F; }
.scen-badge.is-yellow { background: rgba(217,154,68,0.1); color: #8B5E20; }
.scen-badge.is-orange { background: rgba(217,87,68,0.08); color: #8B3B33; }
.scen-foot { margin-top: 22px; padding-top: 20px; border-top: 0.5px solid rgba(0,0,0,0.08); }
.scen-cta { display: block; text-align: center; font-size: 13px; padding: 11px 16px; background: #3D3F43; color: #fff; border-radius: 7px; font-weight: 500; text-decoration: none; }
.scen-cta:hover { background: #4D5054; }
.scen-meta { font-size: 11px; color: #8A857B; text-align: center; margin: 10px 0 0; line-height: 1.5; }
.full-scen { display: flex; flex-direction: column; gap: 32px; max-width: 1080px; margin: 0 auto; }
.fs-card { background: #fff; border-radius: 16px; border: 0.5px solid rgba(0,0,0,0.08); padding: 48px 56px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; align-items: start; }
.fs-card.is-green { border-left: 3px solid #5F7355; }
.fs-card.is-yellow { border-left: 3px solid #B0822E; }
.fs-card.is-orange { border-left: 3px solid #B0463C; }
.fs-left-icon { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 22px; }
.fs-card.is-green .fs-left-icon { background: rgba(95,115,85,0.1); color: #5F7355; }
.fs-card.is-yellow .fs-left-icon { background: rgba(217,154,68,0.1); color: #B0822E; }
.fs-card.is-orange .fs-left-icon { background: rgba(217,87,68,0.08); color: #B0463C; }
.fs-num { font-size: 12px; color: #8A857B; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin: 0 0 8px; }
.fs-title { font-size: 26px; font-weight: 500; margin: 0 0 14px; letter-spacing: -0.018em; line-height: 1.2; }
.fs-summary { font-size: 14px; line-height: 1.6; color: #6B6862; margin: 0; }
.fs-right-text { font-size: 15px; line-height: 1.75; color: #55585C; }
.fs-right-text p { margin: 0 0 16px; }
.fs-right-text p:last-child { margin-bottom: 0; }
.fs-right-text strong { color: #3D3F43; font-weight: 500; }
.fs-detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; margin-top: 24px; padding-top: 24px; border-top: 0.5px solid rgba(0,0,0,0.08); }
.fs-detail { display: flex; flex-direction: column; gap: 4px; }
.fs-detail-label { font-size: 11px; color: #8A857B; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }
.fs-detail-value { font-size: 14px; font-weight: 500; color: #3D3F43; line-height: 1.4; }
.protect { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.protect-item { padding: 32px 28px; background: rgba(255,255,255,0.05); border-radius: 14px; border: 0.5px solid rgba(255,255,255,0.12); }
.protect-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(95,115,85,0.15); color: #A4B29B; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 20px; }
.protect-title { font-size: 18px; font-weight: 500; color: #fff; margin: 0 0 10px; letter-spacing: -0.012em; line-height: 1.3; }
.protect-text { font-size: 14px; line-height: 1.65; color: #B8B0A2; margin: 0; }
.scen-list { position: relative; }
.scen-row { position: relative; transition: all 0.3s ease; }
.scen-item { cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; }
.scen-item:hover { border-color: rgba(95,115,85,0.4); }
.scen-item.is-selected { border-color: #5F7355; background: #fff; box-shadow: 0 0 0 1px #5F7355, 0 8px 20px -8px rgba(95,115,85,0.3); }
.scen-chevron { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #B8B0A2; font-size: 16px; transition: transform 0.2s, color 0.2s; }
.scen-item.is-selected .scen-chevron { transform: translateY(-50%) rotate(90deg); color: #5F7355; }
.scen:has(.scen-item.is-selected) .scen-title,
.scen:has(.scen-item.is-selected) .scen-sub { max-height: 0; opacity: 0; margin: 0; overflow: hidden; transition: all .3s ease; }
.scen-title, .scen-sub { transition: all .3s ease; max-height: 80px; }
.scen-flow { display: flex; flex-direction: column; gap: 12px; }
.scen-flow:has(.is-selected) {  }
.scen-flow:has(.is-selected) .scen-item,
.scen-flow .scen-item {  }
.scen-flow:has(.is-selected) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: stretch; }
.scen-flow:has(.is-selected) .scen-detail { grid-column: 1 / -1; order: 9; margin-top: 2px; }
.scen-flow:has(.is-selected) .scen-item { grid-template-columns: none; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 7px; padding: 12px 9px; height: 100%; box-sizing: border-box; }
.scen-flow:has(.is-selected) .scen-item .scen-icon { width: 30px; height: 30px; font-size: 14px; }
.scen-flow:has(.is-selected) .scen-item .scen-desc { display: none; }
.scen-flow:has(.is-selected) .scen-item .scen-name { font-size: 12px; margin: 0; line-height: 1.2; }
.scen-flow:has(.is-selected) .scen-item .scen-chevron { display: none; }
.scen-flow:has(.is-selected) .scen-item .scen-badge { font-size: 9.5px; padding: 2px 7px; }
.scen-flow:has(.is-selected) .scen-item:not(.is-selected) { opacity: .78; }
.scen-flow:has(.is-selected) .scen-item.is-selected { box-shadow: 0 0 0 2px #5F7355, 0 8px 20px -8px rgba(95,115,85,0.35); }
.scen-detail .scen-answer { display: none; }
.scen-detail .scen-answer.is-open { display: block; animation: scenSlide .25s ease; }
.scen-answer { display: none; margin-top: 10px;
  background: #F3ECE3; border-left: 3px solid #5F7355; border-radius: 10px; padding: 18px 20px; }
.scen-row:has(.scen-item.is-selected) .scen-answer,
.scen-answer.is-open { display: block; animation: scenSlide 0.25s ease; }
.scen-answer-head { font-size: 14px; font-weight: 600; color: #3D3F43; margin: 0 0 8px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.35; }
.scen-answer-head i { color: #5F7355; font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.scen-answer-body { font-size: 13px; color: #6B6862; margin: 0 0 14px; line-height: 1.55; }
.scen-answer-fact { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #47553F; background: rgba(95,115,85,0.08); padding: 9px 12px; border-radius: 7px; margin: 0 0 14px; line-height: 1.4; }
.scen-answer-fact i { font-size: 15px; flex-shrink: 0; }
.scen-answer-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #5F7355; text-decoration: none; }
.scen-answer-cta:hover { gap: 9px; }
.scen-answer-cta i { transition: transform 0.15s; font-size: 14px; }
.tline { position: relative; z-index: 3; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.tline.is-lifted { box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 40px 90px -28px rgba(61,63,67,0.38), 0 12px 30px -12px rgba(61,63,67,0.2);
      transform: translateY(-2px); }
.tline { background: #fff; border-radius: 18px; border: 0.5px solid rgba(0,0,0,0.08); padding: 32px; box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 32px 64px -32px rgba(0,0,0,0.12); display: flex; flex-direction: column; }
.tline-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #5F7355; padding: 3px 10px; background: rgba(95,115,85,0.08); border-radius: 100px; margin-bottom: 14px; font-weight: 500; letter-spacing: 0.02em; align-self: flex-start; }
.tline-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: #5F7355; }
.tline-title { font-size: 20px; font-weight: 500; margin: 0 0 6px; letter-spacing: -0.015em; line-height: 1.3; }
.tline-sub { font-size: 13px; color: #6B6862; margin: 0 0 24px; line-height: 1.5; }
.tline-stages { display: flex; flex-direction: column; gap: 0; position: relative; }
.tline-stage { display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding: 14px 0; position: relative; }
.tline-stage:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 38px; bottom: -4px; width: 1.5px; background: rgba(0,0,0,0.1); }
.tline-dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; position: relative; z-index: 1; }
.tline-dot.is-red { background: rgba(217,87,68,0.1); color: #B0463C; border: 1.5px solid #B0463C; }
.tline-dot.is-yellow { background: rgba(217,154,68,0.1); color: #B0822E; border: 1.5px solid #B0822E; }
.tline-dot.is-green { background: rgba(95,115,85,0.1); color: #5F7355; border: 1.5px solid #5F7355; }
.tline-content { padding-top: 4px; }
.tline-when { font-size: 11px; color: #8A857B; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 4px; }
.tline-what { font-size: 15px; font-weight: 500; color: #3D3F43; margin: 0 0 6px; letter-spacing: -0.008em; line-height: 1.3; }
.tline-detail { font-size: 13px; line-height: 1.55; color: #6B6862; margin: 0; }
.tline-detail strong { color: #3D3F43; font-weight: 500; }
.tline-foot { margin-top: 24px; padding-top: 20px; border-top: 0.5px solid rgba(0,0,0,0.08); }
.tline-cta { display: block; text-align: center; font-size: 13px; padding: 11px 16px; background: #3D3F43; color: #fff; border-radius: 7px; font-weight: 500; text-decoration: none; }
.tline-cta:hover { background: #4D5054; }
.tline-meta { font-size: 11px; color: #8A857B; text-align: center; margin: 10px 0 0; line-height: 1.5; }
.differ { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.diff-col { background: #F3ECE3; border-radius: 14px; padding: 36px 32px; border: 0.5px solid rgba(0,0,0,0.06); }
.diff-col.is-consumer { border-left: 3px solid #5F7355; }
.diff-col.is-business { border-left: 3px solid #B0822E; }
.diff-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.diff-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.diff-col.is-consumer .diff-icon { background: rgba(95,115,85,0.08); color: #5F7355; }
.diff-col.is-business .diff-icon { background: rgba(217,154,68,0.1); color: #B0822E; }
.diff-title { font-size: 19px; font-weight: 500; margin: 0; letter-spacing: -0.012em; }
.diff-text { font-size: 14px; line-height: 1.65; color: #6B6862; margin: 0 0 22px; }
.diff-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding-top: 18px; border-top: 0.5px solid rgba(0,0,0,0.08); list-style: none; }
.diff-li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: #55585C; }
.diff-li-icon { color: #8A857B; font-size: 13px; margin-top: 2px; flex-shrink: 0; }
.diff-li strong { color: #3D3F43; font-weight: 500; }
.specific { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.spec { padding: 32px 28px; background: #F3ECE3; border-radius: 14px; border: 0.5px solid rgba(0,0,0,0.06); }
.spec-num { font-size: 12px; color: #8A857B; font-weight: 500; letter-spacing: 0.04em; margin: 0 0 14px; text-transform: uppercase; }
.spec-title { font-size: 19px; font-weight: 500; margin: 0 0 12px; letter-spacing: -0.012em; line-height: 1.25; }
.spec-text { font-size: 14px; line-height: 1.6; color: #6B6862; margin: 0; }
.spec-text strong { color: #3D3F43; font-weight: 500; }
.when-can { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wc-item { padding: 32px 28px; background: rgba(255,255,255,0.05); border-radius: 14px; border: 0.5px solid rgba(255,255,255,0.12); }
.wc-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(95,115,85,0.15); color: #A4B29B; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 20px; }
.wc-title { font-size: 18px; font-weight: 500; color: #fff; margin: 0 0 10px; letter-spacing: -0.012em; line-height: 1.3; }
.wc-text { font-size: 14px; line-height: 1.65; color: #B8B0A2; margin: 0; }
.wc-text strong { color: #fff; font-weight: 500; }
.head-photo { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 56px; }
.head-photo .section-head { max-width: none; margin: 0; text-align: left; }
.head-photo .hp-photo { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 18px 40px -22px rgba(61,63,67,0.35); }
.head-photo .hp-photo .hp-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s ease; }
.head-photo .hp-photo .hp-scrim { position: absolute; inset: 0; background: rgba(40,38,34,0.18); transition: background .4s ease; }
.head-photo .hp-photo:hover .hp-scrim { background: rgba(40,38,34,0); }
.head-photo .hp-photo:hover .hp-bg { transform: scale(1.05); }
.head-photo.mirror { direction: rtl; }
.head-photo.mirror > * { direction: ltr; }
.have { position: relative; z-index: 3; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.have.is-lifted { box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 40px 90px -28px rgba(61,63,67,0.38), 0 12px 30px -12px rgba(61,63,67,0.2);
      transform: translateY(-2px); }
.have { background: #fff; border-radius: 18px; border: 0.5px solid rgba(0,0,0,0.08); padding: 32px; box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 32px 64px -32px rgba(0,0,0,0.12); }
.have-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #5F7355; padding: 3px 10px; background: rgba(95,115,85,0.08); border-radius: 100px; margin-bottom: 14px; font-weight: 500; letter-spacing: 0.02em; }
.have-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: #5F7355; }
.have-title { font-size: 22px; font-weight: 500; margin: 0 0 8px; letter-spacing: -0.015em; line-height: 1.3; }
.have-sub { font-size: 13px; color: #6B6862; margin: 0 0 22px; line-height: 1.5; }
.have-item { padding: 16px 0; border-bottom: 0.5px solid rgba(0,0,0,0.06); }
.have-item:last-of-type { border-bottom: 0; }
.have-q { font-size: 14px; font-weight: 500; color: #3D3F43; margin: 0 0 6px; line-height: 1.4; }
.have-a { font-size: 13px; color: #6B6862; line-height: 1.55; margin: 0; }
.have-a strong { color: #5F7355; font-weight: 500; }
.have-foot { background: rgba(95,115,85,0.06); border-radius: 10px; padding: 14px 16px; margin-top: 18px; }
.have-foot-title { font-size: 13px; font-weight: 500; color: #3D3F43; margin: 0 0 4px; }
.have-foot-text { font-size: 12px; color: #6B6862; line-height: 1.5; margin: 0; }
.have-cta { display: block; text-align: center; font-size: 13px; padding: 11px 16px; background: #3D3F43; color: #fff; border-radius: 7px; font-weight: 500; text-decoration: none; margin-top: 12px; }
.have-item { cursor: pointer; transition: background 0.15s; border-radius: 8px; padding: 16px; margin: 0 -16px; display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; border-bottom: 0.5px solid rgba(0,0,0,0.06); }
.have-item:hover { background: rgba(95,115,85,0.04); }
.have-check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #D9CFC0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; transition: all 0.15s; }
.have-check i { color: #fff; font-size: 13px; opacity: 0; transition: opacity 0.15s; }
.have-item.is-checked .have-check { background: #5F7355; border-color: #5F7355; }
.have-item.is-checked .have-check i { opacity: 1; }
.have-item-body { min-width: 0; }
.have-q { font-size: 14px; font-weight: 500; color: #3D3F43; margin: 0 0 4px; line-height: 1.4; }
.have-result { margin-top: 18px; border-radius: 12px; padding: 18px; transition: all 0.3s; }
.have-result.r-low { background: rgba(138,133,123,0.08); border-left: 3px solid #8A857B; }
.have-result.r-mid { background: rgba(176,130,46,0.08); border-left: 3px solid #B0822E; }
.have-result.r-high { background: rgba(95,115,85,0.08); border-left: 3px solid #5F7355; }
.have-result-count { font-size: 13px; font-weight: 600; color: #3D3F43; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.have-result-count i { font-size: 17px; }
.r-high .have-result-count i { color: #5F7355; }
.r-mid .have-result-count i { color: #B0822E; }
.r-low .have-result-count i { color: #8A857B; }
.have-result-text { font-size: 13px; color: #6B6862; line-height: 1.5; margin: 0; }
.have-cta:hover { background: #4D5054; }
.section-head-left { text-align: left; margin: 0 0 56px; max-width: 100%; }
.pros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pro { padding: 32px 28px; background: #F3ECE3; border-radius: 14px; border: 0.5px solid rgba(0,0,0,0.06); }
.pro-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(95,115,85,0.08); color: #5F7355; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 22px; }
.pro-title { font-size: 19px; font-weight: 500; margin: 0 0 12px; letter-spacing: -0.012em; line-height: 1.3; }
.pro-text { font-size: 14px; line-height: 1.65; color: #6B6862; margin: 0; }
.pro-text strong { color: #3D3F43; font-weight: 500; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step { padding: 32px 24px; background: #F3ECE3; border-radius: 14px; border: 0.5px solid rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 12px; }
.step-num { width: 36px; height: 36px; border-radius: 8px; background: #3D3F43; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; }
.step-time { font-size: 12px; color: #8A857B; }
.step-title { font-size: 17px; font-weight: 500; margin: 0; letter-spacing: -0.012em; line-height: 1.3; }
.myths { display: flex; flex-direction: column; gap: 16px; }
.myth { background: rgba(255,255,255,0.05); border-radius: 14px; padding: 28px 32px; border: 0.5px solid rgba(255,255,255,0.12); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.myth-q { font-size: 16px; color: #fff; margin: 0; font-weight: 500; }
.myth-q-label { font-size: 11px; color: #B0463C; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 8px; font-weight: 500; }
.myth-a { font-size: 14px; line-height: 1.65; color: #B8B0A2; margin: 0; }
.myth-a-label { font-size: 11px; color: #A4B29B; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 8px; font-weight: 500; }
.myth-a strong { color: #fff; font-weight: 500; }
.paths { position: relative; z-index: 3; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.paths.is-lifted { box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 40px 90px -28px rgba(61,63,67,0.38), 0 12px 30px -12px rgba(61,63,67,0.2);
      transform: translateY(-2px); }
.paths { background: #fff; border-radius: 18px; border: 0.5px solid rgba(0,0,0,0.08); padding: 32px; box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 32px 64px -32px rgba(0,0,0,0.12); }
.paths-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #5F7355; padding: 3px 10px; background: rgba(95,115,85,0.08); border-radius: 100px; margin-bottom: 14px; font-weight: 500; letter-spacing: 0.02em; }
.paths-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: #5F7355; }
.paths-title { font-size: 22px; font-weight: 500; margin: 0 0 8px; letter-spacing: -0.015em; line-height: 1.3; }
.paths-sub { font-size: 13px; color: #6B6862; margin: 0 0 22px; line-height: 1.5; }
.path { padding: 16px 18px; background: #F3ECE3; border-radius: 10px; margin-bottom: 10px; border: 0.5px solid rgba(0,0,0,0.06); }
.path-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.path-name { font-size: 14px; font-weight: 500; color: #3D3F43; }
.path-badge { font-size: 11px; padding: 3px 9px; border-radius: 100px; font-weight: 500; }
.path-badge.is-best { background: rgba(95,115,85,0.1); color: #5F7355; }
.path-badge.is-risk { background: rgba(176,70,60,0.1); color: #B0463C; }
.path-badge.is-medium { background: rgba(176,130,46,0.1); color: #B0822E; }
.path-text { font-size: 12px; color: #6B6862; line-height: 1.5; margin: 0; }
.path-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 0.5px solid rgba(0,0,0,0.06); }
.path-meta-label { font-size: 10px; color: #8A857B; letter-spacing: 0.04em; text-transform: uppercase; }
.path-meta-val { font-size: 12px; font-weight: 500; color: #3D3F43; margin-top: 2px; }
.paths-cta { display: block; text-align: center; font-size: 13px; padding: 11px 16px; background: #3D3F43; color: #fff; border-radius: 7px; font-weight: 500; text-decoration: none; margin-top: 12px; }
.path { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; position: relative; }
.path:hover { border-color: rgba(95,115,85,0.4); }
.path.is-selected { border-color: #5F7355; background: #fff; box-shadow: 0 0 0 1px #5F7355, 0 8px 20px -8px rgba(95,115,85,0.25); }
.path-expand { display: none; margin-top: 12px; padding-top: 12px; border-top: 0.5px solid rgba(0,0,0,0.08); }
.path.is-selected .path-expand { display: block; animation: pathSlide 0.25s ease; }
.path-pros, .path-cons { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.path-pro, .path-con { font-size: 12px; line-height: 1.45; display: flex; align-items: flex-start; gap: 7px; color: #6B6862; }
.path-pro i { color: #5F7355; font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.path-con i { color: #B0822E; font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.path-when { font-size: 12px; color: #47553F; background: rgba(95,115,85,0.08); padding: 9px 11px; border-radius: 7px; line-height: 1.45; margin: 0; }
.path-when strong { color: #3D3F43; font-weight: 600; }
.paths-cta:hover { background: #4D5054; }
.cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.case-card { padding: 36px 32px; background: #F3ECE3; border-radius: 14px; border: 0.5px solid rgba(0,0,0,0.06); }
.case-card.is-bank { border-left: 3px solid #5F7355; }
.case-card.is-bankruptcy { border-left: 3px solid #B0822E; }
.case-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.case-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.case-icon.is-bank { background: rgba(95,115,85,0.08); color: #5F7355; }
.case-icon.is-bankruptcy { background: rgba(176,130,46,0.08); color: #B0822E; }
.case-title { font-size: 22px; font-weight: 500; margin: 0; letter-spacing: -0.015em; line-height: 1.3; }
.case-lead { font-size: 15px; line-height: 1.65; color: #55585C; margin: 0 0 18px; }
.case-list { display: flex; flex-direction: column; gap: 10px; }
.case-li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 14px; color: #6B6862; line-height: 1.5; align-items: start; }
.case-li i { color: #5F7355; font-size: 14px; margin-top: 4px; }
.case-meta { margin-top: 22px; padding-top: 18px; border-top: 0.5px solid rgba(0,0,0,0.08); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.case-meta-label { font-size: 11px; color: #8A857B; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }
.case-meta-val { font-size: 14px; font-weight: 500; color: #3D3F43; margin-top: 4px; }
/* ZAWĘŻONE 2026-08-04 — ciemny wariant scenariuszy.
   Te same nazwy klas obsługują dwa układy: jasny (linie ~380–390, sekcja `.s-alt`
   na „Plan spłaty") i ciemny (sekcja `.s-dark` na „Frankowicze"). Ciemny stał niżej
   bez zawężenia, więc wygrywał wszędzie i na jasnej sekcji dawał biały tekst na
   niemal białej karcie — trzy tytuły scenariuszy i sześć fragmentów <strong>
   były niewidoczne na „Plan spłaty". */
.s-dark .scenarios { display: flex; flex-direction: column; gap: 32px; max-width: 1080px; margin: 0 auto; }
.s-dark .scenario { background: rgba(255,255,255,0.05); border-radius: 16px; padding: 40px 48px; border: 0.5px solid rgba(255,255,255,0.12); display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: start; }
.s-dark .scenario-title { font-size: 24px; font-weight: 500; color: #fff; margin: 0 0 14px; letter-spacing: -0.018em; line-height: 1.2; }
.s-dark .scenario-summary { font-size: 14px; line-height: 1.6; color: #B8B0A2; margin: 0; }
.s-dark .scenario-body p { font-size: 15px; line-height: 1.7; color: #B8B0A2; margin: 0 0 14px; }
.s-dark .scenario-body strong { color: #fff; font-weight: 500; }
.sit { position: relative; z-index: 3; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.sit.is-lifted { box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 40px 90px -28px rgba(61,63,67,0.38), 0 12px 30px -12px rgba(61,63,67,0.2);
      transform: translateY(-2px); }
.sit { background: #fff; border-radius: 18px; border: 0.5px solid rgba(0,0,0,0.08); padding: 32px; box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 32px 64px -32px rgba(0,0,0,0.12); display: flex; flex-direction: column; }
.sit-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #5F7355; padding: 3px 10px; background: rgba(95,115,85,0.08); border-radius: 100px; margin-bottom: 14px; font-weight: 500; letter-spacing: 0.02em; align-self: flex-start; }
.sit-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: #5F7355; }
.sit-title { font-size: 20px; font-weight: 500; margin: 0 0 6px; letter-spacing: -0.015em; line-height: 1.3; }
.sit-sub { font-size: 13px; color: #6B6862; margin: 0 0 22px; line-height: 1.5; }
.sit-list { display: flex; flex-direction: column; gap: 10px; }
.sit-item { background: #F3ECE3; border-radius: 10px; padding: 18px 20px; border: 0.5px solid rgba(0,0,0,0.06); display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: center; }
.sit-icon { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; background: rgba(95,115,85,0.08); color: #5F7355; }
.sit-info { min-width: 0; }
.sit-name { font-size: 14px; font-weight: 500; color: #3D3F43; margin: 0 0 4px; letter-spacing: -0.008em; }
.sit-desc { font-size: 12px; color: #6B6862; margin: 0; line-height: 1.4; }
.sit-foot { margin-top: 22px; padding-top: 20px; border-top: 0.5px solid rgba(0,0,0,0.08); }
.sit-cta { display: block; text-align: center; font-size: 13px; padding: 11px 16px; background: #3D3F43; color: #fff; border-radius: 7px; font-weight: 500; text-decoration: none; }
.sit-cta:hover { background: #4D5054; }
.sit-meta { font-size: 11px; color: #8A857B; text-align: center; margin: 10px 0 0; line-height: 1.5; }
.sit-item { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; position: relative; }
.sit-item:hover { border-color: rgba(95,115,85,0.4); }
.sit-item.is-selected { border-color: #5F7355; background: #fff; box-shadow: 0 0 0 1px #5F7355, 0 8px 20px -8px rgba(95,115,85,0.3); }
.sit-chevron { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #B8B0A2; font-size: 16px; transition: transform 0.2s, color 0.2s; }
.sit-item.is-selected .sit-chevron { transform: translateY(-50%) rotate(90deg); color: #5F7355; }
.sit-answer-head { font-size: 14px; font-weight: 600; color: #3D3F43; margin: 0 0 8px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.35; }
.sit-answer-head i { color: #5F7355; font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.sit-answer-body { font-size: 13px; color: #6B6862; margin: 0 0 14px; line-height: 1.55; }
.sit-answer-fact { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #47553F; background: rgba(95,115,85,0.08); padding: 9px 12px; border-radius: 7px; margin: 0 0 14px; line-height: 1.4; }
.sit-answer-fact i { font-size: 15px; flex-shrink: 0; }
.sit-answer-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #5F7355; text-decoration: none; }
.sit-answer-cta:hover { gap: 9px; }
.sit-answer-cta i { transition: transform 0.15s; font-size: 14px; }
.sit:has(.sit-item.is-selected) .sit-title,
    .sit:has(.sit-item.is-selected) .sit-sub { max-height: 0; opacity: 0; margin: 0; overflow: hidden; transition: all .32s ease; }
.sit-title, .sit-sub { transition: all .32s ease; max-height: 80px; }
.sit-flow { display: flex; flex-direction: column; gap: 10px; }
.sit-detail .sit-answer { display: none; }
.sit-detail .sit-answer.is-open { display: block; animation: sitSlide .25s ease; }
.sit-answer { background: #F3ECE3; border-left: 3px solid #5F7355; border-radius: 10px; padding: 16px 18px; }
.sit-flow:has(.is-selected) { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; align-items: stretch; }
.sit-flow:has(.is-selected) .sit-detail { grid-column: 1 / -1; order: 9; margin-top: 2px; }
.sit-flow:has(.is-selected) .sit-item { grid-template-columns: none; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 13px 10px; height: 100%; }
.sit-flow:has(.is-selected) .sit-item .sit-icon { width: 30px; height: 30px; font-size: 14px; }
.sit-flow:has(.is-selected) .sit-item .sit-desc { display: none; }
.sit-flow:has(.is-selected) .sit-item .sit-name { font-size: 12.5px; margin: 0; line-height: 1.25; }
.sit-flow:has(.is-selected) .sit-item .sit-chevron { display: none; }
.sit-flow:has(.is-selected) .sit-item:not(.is-selected) { opacity: .78; }
.sit-flow:has(.is-selected) .sit-item.is-selected { box-shadow: 0 0 0 2px #5F7355, 0 8px 20px -8px rgba(95,115,85,0.35); }
.full-sit { display: flex; flex-direction: column; gap: 24px; }
.fsit { background: #F3ECE3; border-radius: 16px; border: 0.5px solid rgba(0,0,0,0.06); padding: 40px 48px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: start; }
.fsit-icon { width: 52px; height: 52px; border-radius: 12px; background: rgba(95,115,85,0.08); color: #5F7355; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 22px; }
.fsit-num { font-size: 12px; color: #8A857B; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin: 0 0 8px; }
.fsit-title { font-size: 24px; font-weight: 500; margin: 0 0 12px; letter-spacing: -0.018em; line-height: 1.2; }
.fsit-summary { font-size: 14px; line-height: 1.6; color: #6B6862; margin: 0; }
.fsit-body { font-size: 15px; line-height: 1.75; color: #55585C; }
.fsit-body p { margin: 0 0 14px; }
.fsit-body p:last-child { margin-bottom: 0; }
.fsit-body strong { color: #3D3F43; font-weight: 500; }
.fsit-keypoint { margin-top: 20px; padding: 16px 20px; background: #fff; border-radius: 10px; border-left: 2px solid #5F7355; font-size: 14px; line-height: 1.55; color: #55585C; }
.fsit-keypoint strong { color: #3D3F43; font-weight: 500; }
.privacy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.priv-item { padding: 32px 28px; background: rgba(255,255,255,0.05); border-radius: 14px; border: 0.5px solid rgba(255,255,255,0.12); }
.priv-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(95,115,85,0.15); color: #A4B29B; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 20px; }
.priv-title { font-size: 18px; font-weight: 500; color: #fff; margin: 0 0 10px; letter-spacing: -0.012em; line-height: 1.3; }
.priv-text { font-size: 14px; line-height: 1.65; color: #B8B0A2; margin: 0; }
.timeline-card { position: relative; z-index: 3; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.timeline-card.is-lifted { box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 40px 90px -28px rgba(61,63,67,0.38), 0 12px 30px -12px rgba(61,63,67,0.2);
      transform: translateY(-2px); }
.timeline-card { background: #fff; border-radius: 18px; border: 0.5px solid rgba(0,0,0,0.08); padding: 32px; box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 32px 64px -32px rgba(0,0,0,0.12); }
.timeline-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #5F7355; padding: 3px 10px; background: rgba(95,115,85,0.08); border-radius: 100px; margin-bottom: 14px; font-weight: 500; letter-spacing: 0.02em; }
.timeline-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: #5F7355; }
.timeline-title { font-size: 22px; font-weight: 500; margin: 0 0 8px; letter-spacing: -0.015em; line-height: 1.3; }
.timeline-sub { font-size: 13px; color: #6B6862; margin: 0 0 22px; line-height: 1.5; }
.tl-step { display: grid; grid-template-columns: 24px 1fr; gap: 14px; margin-bottom: 18px; }
.tl-step:last-of-type { margin-bottom: 0; }
.tl-dot { width: 24px; height: 24px; border-radius: 50%; background: rgba(95,115,85,0.1); color: #5F7355; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; flex-shrink: 0; }
.tl-when { font-size: 11px; color: #8A857B; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; margin: 4px 0 4px; }
.tl-name { font-size: 14px; font-weight: 500; color: #3D3F43; margin: 0 0 4px; line-height: 1.4; }
.tl-text { font-size: 12px; color: #6B6862; line-height: 1.55; margin: 0; }
.timeline-cta { display: block; text-align: center; font-size: 13px; padding: 11px 16px; background: #3D3F43; color: #fff; border-radius: 7px; font-weight: 500; text-decoration: none; margin-top: 14px; }
.timeline-cta:hover { background: #4D5054; }
.tslider-panel.tone-neutral { border-left-color: #8A857B; background: rgba(138,133,123,0.06); }
.tslider-panel.tone-sage { border-left-color: #7A8B6E; background: rgba(122,139,110,0.07); }
.tone-neutral .tslider-panel-icon { background: rgba(138,133,123,0.14); color: #6B6862; }
.tone-sage .tslider-panel-icon { background: rgba(122,139,110,0.16); color: #5F7355; }
.areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.area { padding: 36px 32px; background: #F3ECE3; border-radius: 14px; border: 0.5px solid rgba(0,0,0,0.06); }
.area-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(95,115,85,0.08); color: #5F7355; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 20px; }
.area-title { font-size: 20px; font-weight: 500; margin: 0 0 12px; letter-spacing: -0.015em; line-height: 1.3; }
.area-text { font-size: 14px; line-height: 1.65; color: #6B6862; margin: 0 0 18px; }
.area-text strong { color: #3D3F43; font-weight: 500; }
.area-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 16px; border-top: 0.5px solid rgba(0,0,0,0.08); }
.area-foot-label { font-size: 11px; color: #8A857B; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }
.area-foot-val { font-size: 14px; font-weight: 500; color: #3D3F43; margin-top: 4px; }
.build-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.build { padding: 32px 24px; background: rgba(255,255,255,0.05); border-radius: 14px; border: 0.5px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; gap: 12px; }
.build-num { width: 36px; height: 36px; border-radius: 8px; background: #A4B29B; color: #3D3F43; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; }
.build-when { font-size: 12px; color: #8A857B; }
.build-title { font-size: 17px; font-weight: 500; color: #fff; margin: 0; letter-spacing: -0.012em; line-height: 1.3; }
.build-text { font-size: 14px; line-height: 1.6; color: #B8B0A2; margin: 0; }
.myth { background: #F3ECE3; border-radius: 14px; padding: 28px 32px; border: 0.5px solid rgba(0,0,0,0.06); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.myth-q { font-size: 16px; color: #3D3F43; margin: 0; font-weight: 500; line-height: 1.5; }
.myth-a-label { font-size: 11px; color: #5F7355; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 8px; font-weight: 500; }
.myth-a { font-size: 14px; line-height: 1.65; color: #6B6862; margin: 0; }
.myth-a strong { color: #3D3F43; font-weight: 500; }
@media (max-width: 1024px) {
      .container { padding: 0 32px; }
      .hero, section.s, .final { padding: 64px 0; }
      h1 { font-size: 40px; }
      h2 { font-size: 28px; }
      .final-h2 { font-size: 32px; }
      .hero-grid { grid-template-columns: 1fr; gap: 40px; }
      .tldr-section { padding: 48px 0; }
      .tldr-section-grid { grid-template-columns: 1fr; gap: 24px; }
      .tldr-section-facts { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .sticky-layout { grid-template-columns: 1fr; gap: 32px; }
      .sticky-side { position: static; }
      .canseize, .qa-grid { grid-template-columns: 1fr; }
      .stages-block, .related { grid-template-columns: repeat(2, 1fr); }
      .mid-cta { grid-template-columns: 1fr; text-align: center; }
      .faq-layout { grid-template-columns: 1fr; gap: 40px; }
      .faq-form { position: static; }
    }
@media (max-width: 720px) {
      .container { padding: 0 20px; }
      h1 { font-size: 32px; }
      h2 { font-size: 24px; }
      .tldr-section-facts { grid-template-columns: 1fr; gap: 20px; }
      .stages-block, .related { grid-template-columns: 1fr; }
    }
@media (max-width: 1024px) {
      .container { padding: 0 32px; }
      .hero, section.s, .final { padding: 64px 0; }
      h1 { font-size: 40px; }
      h2 { font-size: 28px; }
      .final-h2 { font-size: 32px; }
      .hero-grid { grid-template-columns: 1fr; gap: 40px; }
      .quiz { min-height: auto; }
      .tldr-section { padding: 48px 0; }
      .tldr-section-grid { grid-template-columns: 1fr; gap: 24px; }
      .tldr-section-facts { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .steps3, .ways, .dont, .related { grid-template-columns: repeat(2, 1fr); }
      .mid-cta { grid-template-columns: 1fr; text-align: center; }
      .faq-layout { grid-template-columns: 1fr; gap: 40px; }
      .faq-form { position: static; }
    }
@media (max-width: 720px) {
      .container { padding: 0 20px; }
      h1 { font-size: 32px; }
      h2 { font-size: 24px; }
      .tldr-section-facts, .steps3, .ways, .dont, .related { grid-template-columns: 1fr; }
    }
@media (max-width: 1024px) {
      .container { padding: 0 32px; }
      .hero, section.s, .final { padding: 64px 0; }
      h1 { font-size: 40px; }
      h2 { font-size: 28px; }
      .final-h2 { font-size: 32px; }
      .hero-grid { grid-template-columns: 1fr; gap: 40px; }
      .tldr-section { padding: 48px 0; }
      .tldr-section-grid { grid-template-columns: 1fr; gap: 24px; }
      .tldr-section-facts { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .sticky-layout { grid-template-columns: 1fr; gap: 32px; }
      .sticky-side { position: static; }
      .fs-card { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
      .fs-title { font-size: 22px; }
      .protect, .related { grid-template-columns: repeat(2, 1fr); }
      .mid-cta { grid-template-columns: 1fr; text-align: center; }
      .faq-layout { grid-template-columns: 1fr; gap: 40px; }
      .faq-form { position: static; }
    }
@media (max-width: 720px) {
      .container { padding: 0 20px; }
      h1 { font-size: 32px; }
      h2 { font-size: 24px; }
      .tldr-section-facts { grid-template-columns: 1fr; gap: 20px; }
      .scen-item { grid-template-columns: 38px 1fr; }
      .scen-badge { grid-column: 1 / -1; justify-self: start; }
      .fs-detail-list, .protect, .related { grid-template-columns: 1fr; }
    }
@keyframes scenSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1024px) {
      .container { padding: 0 32px; }
      .hero, section.s, .final { padding: 64px 0; }
      h1 { font-size: 40px; }
      h2 { font-size: 28px; }
      .final-h2 { font-size: 32px; }
      .hero-grid { grid-template-columns: 1fr; gap: 40px; }
      .tldr-section { padding: 48px 0; }
      .tldr-section-grid { grid-template-columns: 1fr; gap: 24px; }
      .tldr-section-facts { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .sticky-layout { grid-template-columns: 1fr; gap: 32px; }
      .sticky-side { position: static; }
      .differ { grid-template-columns: 1fr; }
      .specific, .when-can, .related { grid-template-columns: repeat(2, 1fr); }
      .mid-cta { grid-template-columns: 1fr; text-align: center; }
      .faq-layout { grid-template-columns: 1fr; gap: 40px; }
      .faq-form { position: static; }
    }
@media (max-width: 720px) {
      .container { padding: 0 20px; }
      h1 { font-size: 32px; }
      h2 { font-size: 24px; }
      .tldr-section-facts, .specific, .when-can, .related { grid-template-columns: 1fr; }
    }
@media (max-width: 768px) {
      .head-photo, .head-photo.mirror { grid-template-columns: 1fr; gap: 28px; direction: ltr; }
      .head-photo .hp-photo { order: -1; }
    }
@media (max-width: 1024px) {
      .container { padding: 0 32px; }
      .hero { height: auto; padding: 24px 0 64px; }
      section.s, .final { padding: 64px 0; }
      h1 { font-size: 40px; }
      h2 { font-size: 28px; }
      .final-h2 { font-size: 32px; }
      .hero-grid { grid-template-columns: 1fr; gap: 40px; }
      .tldr-section { padding: 48px 0; }
      .tldr-section-grid { grid-template-columns: 1fr; gap: 24px; }
      .tldr-section-facts { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .pros { grid-template-columns: 1fr; }
      .steps { grid-template-columns: repeat(2, 1fr); }
      .myth { grid-template-columns: 1fr; gap: 20px; }
      .related { grid-template-columns: repeat(2, 1fr); }
      .mid-cta { grid-template-columns: 1fr; text-align: center; }
      .faq-layout { grid-template-columns: 1fr; gap: 40px; }
      .faq-form { position: static; }
    }
@media (max-width: 720px) {
      .container { padding: 0 20px; }
      h1 { font-size: 32px; }
      h2 { font-size: 24px; }
      .tldr-section-facts, .steps, .related { grid-template-columns: 1fr; }
    }
@keyframes pathSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1024px) {
      .container { padding: 0 32px; }
      .hero { height: auto; padding: 24px 0 64px; }
      section.s, .final { padding: 64px 0; }
      h1 { font-size: 40px; }
      h2 { font-size: 28px; }
      .final-h2 { font-size: 32px; }
      .hero-grid { grid-template-columns: 1fr; gap: 40px; }
      .tldr-section { padding: 48px 0; }
      .tldr-section-grid { grid-template-columns: 1fr; gap: 24px; }
      .tldr-section-facts { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .cases { grid-template-columns: 1fr; }
      .scenario { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
      .related { grid-template-columns: repeat(2, 1fr); }
      .mid-cta { grid-template-columns: 1fr; text-align: center; }
      .faq-layout { grid-template-columns: 1fr; gap: 40px; }
      .faq-form { position: static; }
    }
@media (max-width: 720px) {
      .container { padding: 0 20px; }
      h1 { font-size: 32px; }
      h2 { font-size: 24px; }
      .tldr-section-facts, .related { grid-template-columns: 1fr; }
    }
@keyframes sitSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1024px) {
      .container { padding: 0 32px; }
      .hero, section.s, .final { padding: 64px 0; }
      h1 { font-size: 40px; }
      h2 { font-size: 28px; }
      .final-h2 { font-size: 32px; }
      .hero-grid { grid-template-columns: 1fr; gap: 40px; }
      .tldr-section { padding: 48px 0; }
      .tldr-section-grid { grid-template-columns: 1fr; gap: 24px; }
      .tldr-section-facts { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .sticky-layout { grid-template-columns: 1fr; gap: 32px; }
      .sticky-side { position: static; }
      .fsit { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
      .privacy, .related { grid-template-columns: repeat(2, 1fr); }
      .mid-cta { grid-template-columns: 1fr; text-align: center; }
      .faq-layout { grid-template-columns: 1fr; gap: 40px; }
      .faq-form { position: static; }
    }
@media (max-width: 720px) {
      .container { padding: 0 20px; }
      h1 { font-size: 32px; }
      h2 { font-size: 24px; }
      .tldr-section-facts, .privacy, .related { grid-template-columns: 1fr; }
    }
@media (max-width: 1024px) {
      .container { padding: 0 32px; }
      .hero { height: auto; padding: 24px 0 64px; }
      section.s, .final { padding: 64px 0; }
      h1 { font-size: 40px; }
      h2 { font-size: 28px; }
      .final-h2 { font-size: 32px; }
      .hero-grid { grid-template-columns: 1fr; gap: 40px; }
      .tldr-section { padding: 48px 0; }
      .tldr-section-grid { grid-template-columns: 1fr; gap: 24px; }
      .tldr-section-facts { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .areas { grid-template-columns: 1fr; }
      .build-steps { grid-template-columns: repeat(2, 1fr); }
      .myth { grid-template-columns: 1fr; gap: 20px; }
      .related { grid-template-columns: repeat(2, 1fr); }
      .mid-cta { grid-template-columns: 1fr; text-align: center; }
      .faq-layout { grid-template-columns: 1fr; gap: 40px; }
      .faq-form { position: static; }
    }
@media (max-width: 720px) {
      .container { padding: 0 20px; }
      h1 { font-size: 32px; }
      h2 { font-size: 24px; }
      .tldr-section-facts, .build-steps, .related { grid-template-columns: 1fr; }
    }


/* ============================================================
   STRONY STATYCZNE: O nas + Strefa eksperta (hub)
   ============================================================ */

.hero { min-height: 640px;
      padding: 24px 0 64px;
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, #F3ECE3 0%, #E9DECF 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-start; }
.hero::after { content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(243,236,227,0.92) 0%, rgba(243,236,227,0.82) 30%, rgba(243,236,227,0.45) 60%, rgba(243,236,227,0.2) 100%);
      z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 80px; align-items: start; margin-top: 0; }
.why-card { background: #fff; border-radius: 18px; border: 0.5px solid rgba(0,0,0,0.08); padding: 32px; box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 32px 64px -32px rgba(0,0,0,0.12); }
.why-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #5F7355; padding: 3px 10px; background: rgba(95,115,85,0.08); border-radius: 100px; margin-bottom: 14px; font-weight: 500; letter-spacing: 0.02em; }
.why-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: #5F7355; }
.why-title { font-size: 20px; font-weight: 500; margin: 0 0 6px; letter-spacing: -0.015em; line-height: 1.3; }
.why-sub { font-size: 13px; color: #6B6862; margin: 0 0 22px; line-height: 1.5; }
.why-list { display: flex; flex-direction: column; gap: 14px; }
.why-item { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 0.5px solid rgba(0,0,0,0.06); }
.why-item:last-child { border: 0; padding-bottom: 0; }
.why-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(95,115,85,0.08); color: #5F7355; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.why-name { font-size: 14px; font-weight: 500; color: #3D3F43; margin: 0 0 3px; letter-spacing: -0.008em; line-height: 1.35; }
.why-desc { font-size: 12px; color: #6B6862; line-height: 1.55; margin: 0; }
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; max-width: 1200px; margin: 0 auto; }
.story-text h2 { margin-top: 0; }
.story-text p { font-size: 17px; line-height: 1.7; color: #55585C; margin: 0 0 18px; }
.story-text p:last-child { margin-bottom: 0; }
.story-text strong { color: #3D3F43; font-weight: 500; }
.story-quote { padding: 28px 32px; background: #F3ECE3; border-left: 3px solid #5F7355; border-radius: 0 12px 12px 0; margin-top: 32px; }
.story-quote p { font-size: 18px; line-height: 1.55; font-style: italic; color: #3D3F43; margin: 0 0 10px; }
.story-quote cite { font-size: 13px; color: #6B6862; font-style: normal; }
.story-img { aspect-ratio: 4/5; border-radius: 18px; background-color: #E9DECF; background-image: var(--story-img, none); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 32px 64px -16px rgba(0,0,0,0.18); }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.team-card { background: #F3ECE3; border-radius: 14px; padding: 32px 28px; border: 0.5px solid rgba(0,0,0,0.06); display: flex; flex-direction: column; }
.team-photo { width: 100%; aspect-ratio: 1/1; border-radius: 100%; background-size: cover; background-position: center; margin: 0 auto 22px; max-width: 140px; box-shadow: 0 4px 16px -4px rgba(0,0,0,0.1); }
.team-name { font-size: 19px; font-weight: 500; margin: 0 0 4px; letter-spacing: -0.012em; text-align: center; }
.team-role { font-size: 13px; color: #5F7355; font-weight: 500; margin: 0 0 16px; text-align: center; }
.team-bio { font-size: 14px; line-height: 1.65; color: #6B6862; margin: 0; text-align: center; }
.values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 1100px; margin: 0 auto; }
.value { background: rgba(255,255,255,0.05); border-radius: 14px; padding: 36px 32px; border: 0.5px solid rgba(255,255,255,0.12); }
.value-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(95,115,85,0.15); color: #A4B29B; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 22px; }
.value-title { font-size: 22px; font-weight: 500; color: #fff; margin: 0 0 12px; letter-spacing: -0.015em; line-height: 1.25; }
.value-text { font-size: 15px; line-height: 1.65; color: #B8B0A2; margin: 0; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat { padding: 36px 28px; background: #F3ECE3; border-radius: 14px; border: 0.5px solid rgba(0,0,0,0.06); text-align: center; }
.stat-num { font-size: 52px; font-weight: 500; color: #3D3F43; margin: 0 0 8px; letter-spacing: -0.03em; line-height: 1; }
.stat-num em { font-style: normal; color: #5F7355; }
.stat-label { font-size: 13px; color: #6B6862; line-height: 1.5; }
.mid-cta { margin: 64px auto 0; max-width: 900px; padding: 32px 40px; background: #3D3F43; color: #fff; border-radius: 14px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
.pop { background: #fff; border-radius: 18px; border: 0.5px solid rgba(0,0,0,0.08); padding: 32px; box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 32px 64px -32px rgba(0,0,0,0.12); }
.pop-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #5F7355; padding: 3px 10px; background: rgba(95,115,85,0.08); border-radius: 100px; margin-bottom: 14px; font-weight: 500; letter-spacing: 0.02em; }
.pop-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: #5F7355; }
.pop-title { font-size: 22px; font-weight: 500; margin: 0 0 8px; letter-spacing: -0.015em; line-height: 1.3; }
.pop-sub { font-size: 13px; color: #6B6862; margin: 0 0 22px; line-height: 1.5; }
.pop-item { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 0.5px solid rgba(0,0,0,0.06); text-decoration: none; color: inherit; }
.pop-item:last-of-type { border-bottom: 0; }
.pop-item:hover .pop-name { color: #5F7355; }
.pop-num { width: 28px; height: 28px; border-radius: 8px; background: rgba(95,115,85,0.08); color: #5F7355; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; flex-shrink: 0; }
.pop-name { font-size: 14px; font-weight: 500; color: #3D3F43; margin: 0 0 4px; line-height: 1.4; transition: color 0.15s; }
.pop-meta { font-size: 12px; color: #8A857B; }
.topics-section { padding: 96px 0 64px; background: #fff; border-bottom: 0.5px solid rgba(0,0,0,0.06); }
.topics-head { max-width: 760px; margin: 0 0 48px; }
.topics-head h2 { font-size: 36px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 12px; line-height: 1.15; }
.topics-head p { font-size: 16px; color: #6B6862; margin: 0; }
.topics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.topic-card { padding: 24px; background: #F3ECE3; border-radius: 12px; border: 0.5px solid rgba(0,0,0,0.06); cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; gap: 10px; text-align: left; font-family: inherit; }
.topic-card:hover { border-color: rgba(0,0,0,0.18); background: #fff; transform: translateY(-2px); }
.topic-card.is-active { background: rgba(95,115,85,0.05); border-color: #5F7355; }
.topic-card.is-active .topic-count { color: #5F7355; }
.topic-head { display: flex; align-items: center; justify-content: space-between; }
.topic-name { font-size: 15px; font-weight: 500; color: #3D3F43; letter-spacing: -0.008em; line-height: 1.3; }
.topic-arrow { color: #8A857B; font-size: 14px; }
.topic-card:hover .topic-arrow, .topic-card.is-active .topic-arrow { color: #5F7355; }
.topic-count { font-size: 12px; color: #8A857B; }
.articles-section { padding: 96px 0; }
.articles-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 48px; flex-wrap: wrap; gap: 16px; }
.articles-head h2 { font-size: 36px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.15; }
.articles-head p { font-size: 15px; color: #6B6862; margin: 0; }
.articles-sort { font-size: 13px; color: #6B6862; display: flex; align-items: center; gap: 8px; }
.articles-sort select { font-family: inherit; font-size: 13px; padding: 8px 12px; background: #fff; border: 0.5px solid rgba(0,0,0,0.15); border-radius: 7px; color: #3D3F43; outline: none; }
.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.article-card { background: #fff; border-radius: 14px; overflow: hidden; border: 0.5px solid rgba(0,0,0,0.06); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: all 0.2s; }
.article-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -12px rgba(0,0,0,0.12); border-color: rgba(0,0,0,0.1); }
.article-img { aspect-ratio: 16/10; background-size: cover; background-position: center; }
.article-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.article-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #5F7355; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 14px; }
.article-cat-dot { width: 5px; height: 5px; border-radius: 50%; background: #5F7355; }
.article-title { font-size: 19px; font-weight: 500; margin: 0 0 12px; line-height: 1.3; letter-spacing: -0.012em; color: #3D3F43; }
.article-excerpt { font-size: 14px; line-height: 1.6; color: #6B6862; margin: 0 0 20px; }
.article-meta { margin-top: auto; padding-top: 18px; border-top: 0.5px solid rgba(0,0,0,0.06); display: flex; gap: 14px; font-size: 12px; color: #8A857B; }
.article-meta-item { display: flex; align-items: center; gap: 5px; }
.nl { padding: 96px 0; background: #3D3F43; color: #fff; }
.nl-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; }
.nl-h2 { font-size: 40px; font-weight: 500; letter-spacing: -0.022em; line-height: 1.15; margin: 0 0 18px; color: #fff; }
.nl-h2 em { font-style: normal; color: #8A857B; font-weight: 400; }
.nl-lead { font-size: 17px; color: #B8B0A2; line-height: 1.55; margin: 0 0 28px; }
.nl-form { display: flex; gap: 10px; }
.nl-input { flex: 1; font-family: inherit; font-size: 15px; padding: 14px 18px; background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.15); border-radius: 8px; color: #fff; outline: none; }
.nl-input::placeholder { color: #8A857B; }
.nl-input:focus { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); }
.nl-submit { font-family: inherit; font-size: 15px; padding: 14px 24px; background: #fff; color: #3D3F43; border: 0; border-radius: 8px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.nl-submit:hover { background: #E9DECF; }
.nl-meta { font-size: 12px; color: #8A857B; margin: 14px 0 0; }
.nl-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.nl-stat { padding: 28px 24px; background: rgba(255,255,255,0.05); border-radius: 12px; border: 0.5px solid rgba(255,255,255,0.12); }
.nl-stat-num { font-size: 36px; font-weight: 500; color: #fff; margin: 0 0 6px; letter-spacing: -0.025em; line-height: 1; }
.nl-stat-num em { font-style: normal; color: #A4B29B; }
.nl-stat-label { font-size: 13px; color: #B8B0A2; line-height: 1.5; }
@media (max-width: 1024px) {
      .container { padding: 0 32px; }
      .hero { height: auto; min-height: auto; padding: 24px 0 64px; }
      section.s, .final { padding: 64px 0; }
      h1 { font-size: 40px; }
      h2 { font-size: 28px; }
      .final-h2 { font-size: 32px; }
      .hero-grid { grid-template-columns: 1fr; gap: 40px; }
      .tldr-section { padding: 48px 0; }
      .tldr-section-grid { grid-template-columns: 1fr; gap: 24px; }
      .tldr-section-facts { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .story { grid-template-columns: 1fr; gap: 40px; }
      .story-img { max-width: 400px; margin: 0 auto; }
      .team-grid { grid-template-columns: repeat(2, 1fr); }
      .values { grid-template-columns: 1fr; gap: 20px; }
      .stats { grid-template-columns: repeat(2, 1fr); }
      .mid-cta { grid-template-columns: 1fr; text-align: center; }
    }
@media (max-width: 720px) {
      .container { padding: 0 20px; }
      h1 { font-size: 32px; }
      h2 { font-size: 24px; }
      .tldr-section-facts { grid-template-columns: 1fr; gap: 20px; }
      .team-grid, .stats { grid-template-columns: 1fr; }
      .stat-num { font-size: 42px; }
    }
@media (max-width: 1024px) {
      .container { padding: 0 32px; }
      .hero { height: auto; padding: 24px 0 64px; }
      h1 { font-size: 40px; }
      .hero-grid { grid-template-columns: 1fr; gap: 40px; }
      .topics-section, .articles-section, .nl { padding: 64px 0; }
      .topics-head h2, .articles-head h2, .nl-h2 { font-size: 28px; }
      .topics-grid { grid-template-columns: repeat(2, 1fr); }
      .articles-grid { grid-template-columns: repeat(2, 1fr); }
      .nl-grid { grid-template-columns: 1fr; gap: 40px; }
    }
@media (max-width: 720px) {
      .container { padding: 0 20px; }
      h1 { font-size: 32px; }
      .topics-grid { grid-template-columns: 1fr; }
      .articles-grid { grid-template-columns: 1fr; }
      .nl-form { flex-direction: column; }
      .nl-stats { grid-template-columns: 1fr; }
    }


/* ============================================================
   STRONY PRAWNE + MAPA SERWISU
   ============================================================ */

/* Kompaktowy hero podstrony (bez wielkiego H1, dla stron prawnych/mapy) */
.subpage-hero-compact { padding: 32px 0 24px; background: linear-gradient(180deg, #F3ECE3 0%, #E9DECF 100%); }
.subpage-hero-compact h1 { font-size: 38px; margin: 12px 0 0; }
.legal-updated { font-size: 14px; color: #8A857B; margin: 8px 0 0; }

/* Treść prawna — czytelna wąska kolumna */
.legal-content { max-width: 760px; font-size: 16px; line-height: 1.7; color: #4D5054; }
.legal-content h2 { font-size: 24px; margin: 32px 0 12px; color: #3D3F43; }
.legal-content h3 { font-size: 19px; margin: 24px 0 8px; color: #3D3F43; }
.legal-content p { margin: 0 0 16px; }
.legal-content ul, .legal-content ol { margin: 0 0 16px; padding-left: 24px; }
.legal-content li { margin-bottom: 6px; }
.legal-content a { color: #5F7355; text-decoration: underline; }
.legal-placeholder { color: #8A857B; font-style: italic; }

/* Mapa serwisu */
.mapa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.mapa-h2 { font-size: 18px; color: #3D3F43; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.mapa-list { list-style: none; margin: 0; padding: 0; }
.mapa-list li { margin-bottom: 10px; }
.mapa-list a { color: #4D5054; text-decoration: none; font-size: 15px; }
.mapa-list a:hover { color: #5F7355; }

@media (max-width: 768px) {
  .mapa-grid { grid-template-columns: 1fr; gap: 32px; }
  .subpage-hero-compact h1 { font-size: 30px; }
}


/* ============================================================
   STREFA EKSPERTA — ARTYKUŁY (single)
   article-hero, TOC sidebar, article-content, źródła, CTA, powiązane
   ============================================================ */

.nav-wrap { position: sticky; top: 0; z-index: 50; border-bottom: 0.5px solid rgba(0,0,0,0.06); background: rgba(243,236,227,0.85); backdrop-filter: blur(12px); }
.container-narrow { max-width: 1200px; margin: 0 auto; padding: 0 56px; }
.nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.brand-mark { width: 24px; height: 24px; border-radius: 5px; background: #3D3F43; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 500; }
.brand-text { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.nav-links { display: flex; gap: 32px; }
.nav-link { font-size: 14px; color: #6B6862; text-decoration: none; transition: color 0.15s; }
.nav-link:hover { color: #3D3F43; }
.nav-link.is-active { color: #3D3F43; font-weight: 500; }
.nav-cta { font-size: 14px; padding: 9px 18px; background: #3D3F43; color: #fff; border-radius: 7px; font-weight: 500; text-decoration: none; }
.nav-cta:hover { background: #4D5054; }
.article-hero { padding: 24px 0 64px; background: linear-gradient(180deg, #F3ECE3 0%, #E9DECF 100%); border-bottom: 0.5px solid rgba(0,0,0,0.06); }
.article-hero-grid { display: grid; grid-template-columns: 1fr 0.62fr; gap: 80px; align-items: start; margin-top: 0; }
.article-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #5F7355; padding: 5px 12px; background: rgba(95,115,85,0.08); border-radius: 100px; margin-bottom: 20px; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; }
.article-h1 { font-size: 56px; line-height: 1.08; font-weight: 500; letter-spacing: -0.028em; margin: 0 0 24px; }
.article-lead { font-size: 19px; line-height: 1.6; color: #55585C; margin: 0 0 32px; max-width: 95%; }
.article-meta { display: flex; gap: 28px; font-size: 13px; color: #6B6862; flex-wrap: wrap; padding-top: 24px; border-top: 0.5px solid rgba(0,0,0,0.08); }
.article-meta-item { display: flex; align-items: center; gap: 7px; }
.article-meta-item i { color: #5F7355; font-size: 14px; }
.article-hero-img { aspect-ratio: 4/3; border-radius: 16px; background-size: cover; background-position: center; box-shadow: 0 32px 64px -16px rgba(0,0,0,0.18); }
.article-body { padding: 80px 0; }
.article-layout { display: grid; grid-template-columns: 220px 1000px; gap: 96px; align-items: start; justify-content: start; }
.toc { position: sticky; top: 96px; }
.toc-label { font-size: 11px; color: #8A857B; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; margin: 0 0 18px; }
.toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; border-left: 0.5px solid rgba(0,0,0,0.1); }
.toc-link { display: block; padding: 8px 14px; font-size: 13px; color: #6B6862; line-height: 1.5; text-decoration: none; transition: all 0.15s; border-left: 1px solid transparent; margin-left: -0.5px; }
.toc-link:hover { color: #3D3F43; }
.toc-link.is-active { color: #3D3F43; font-weight: 500; border-left-color: #5F7355; }
.article-content { max-width: 1000px; }
.article-content h2 { font-size: 32px; font-weight: 500; line-height: 1.22; letter-spacing: -0.02em; margin: 64px 0 22px; scroll-margin-top: 100px; }
.article-content h2:first-of-type { margin-top: 0; }
.article-content h3 { font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -0.012em; margin: 40px 0 14px; }
.article-content p { font-size: 17px; line-height: 1.7; color: #4D5054; margin: 0 0 22px; }
.article-content strong { font-weight: 500; color: #3D3F43; }
.article-content em { font-style: italic; color: #3D3F43; }
.article-content ul, .article-content ol { font-size: 17px; line-height: 1.7; color: #4D5054; padding-left: 24px; margin: 0 0 24px; }
.article-content li { margin-bottom: 10px; }
.article-content li::marker { color: #5F7355; }
.article-content blockquote { padding: 28px 32px; background: #E9DECF; border-left: 3px solid #5F7355; border-radius: 0 10px 10px 0; margin: 32px 0; }
.article-content blockquote p { font-size: 18px; font-style: italic; line-height: 1.6; color: #3D3F43; margin: 0; }
.article-content a { color: #5F7355; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 0.5px; }
.article-content a:hover { text-decoration-thickness: 1.5px; }
.article-callout { background: rgba(95,115,85,0.06); border: 0.5px solid rgba(95,115,85,0.25); border-radius: 12px; padding: 26px 30px; margin: 36px 0; display: grid; grid-template-columns: 32px 1fr; gap: 18px; align-items: start; }
.article-callout-icon { width: 32px; height: 32px; border-radius: 8px; background: #5F7355; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.article-callout p { margin: 0; font-size: 16px; line-height: 1.6; color: #3D3F43; }
.article-callout strong { font-weight: 500; }
.article-faq { background: #fff; padding: 80px 0; border-top: 0.5px solid rgba(0,0,0,0.06); }
.article-faq .article-layout { align-items: start; }
.article-faq-content { max-width: 1000px; }
.article-faq-h2 { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 36px; }
.faq-a { font-size: 16px; line-height: 1.65; color: #6B6862; padding: 0 60px 24px 0; display: none; }
.faq-a strong { color: #3D3F43; font-weight: 500; }
.faq-side-cta { position: sticky; top: 96px; background: #3D3F43; color: #fff; border-radius: 12px; padding: 22px 18px; }
.faq-side-eyebrow { font-size: 10px; color: #A4B29B; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
.faq-side-eyebrow::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #A4B29B; flex-shrink: 0; }
.faq-side-title { font-size: 16px; font-weight: 500; color: #fff; margin: 0 0 8px; line-height: 1.3; letter-spacing: -0.012em; }
.faq-side-text { font-size: 12px; color: #B8B0A2; line-height: 1.55; margin: 0 0 16px; }
.faq-side-cta-row { display: flex; flex-direction: column; gap: 6px; }
.faq-side-btn { font-size: 12px; padding: 10px 12px; background: #fff; color: #3D3F43; border-radius: 6px; font-weight: 500; text-decoration: none; text-align: center; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all 0.15s; }
.faq-side-btn:hover { background: #E9DECF; }
.faq-side-phone { font-size: 12px; padding: 10px 12px; background: transparent; color: #fff; border: 0.5px solid rgba(255,255,255,0.2); border-radius: 6px; font-weight: 500; text-decoration: none; text-align: center; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all 0.15s; }
.faq-side-phone:hover { background: rgba(255,255,255,0.06); }
.faq-side-meta { margin-top: 12px; padding-top: 12px; border-top: 0.5px solid rgba(255,255,255,0.12); font-size: 10px; color: #8A857B; text-align: center; line-height: 1.5; }
.article-sources { padding: 56px 0 80px; background: #fff; border-bottom: 0.5px solid rgba(0,0,0,0.06); }
.article-sources .article-layout { align-items: start; }
.article-sources-content { max-width: 1000px; }
.sources-h2 { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 8px; }
.sources-lead { font-size: 14px; color: #6B6862; margin: 0 0 24px; }
.sources-list { display: flex; flex-direction: column; gap: 10px; }
.source-item { display: grid; grid-template-columns: 28px 1fr 18px; gap: 14px; align-items: center; padding: 14px 18px; background: #F3ECE3; border-radius: 9px; border: 0.5px solid rgba(0,0,0,0.06); text-decoration: none; color: inherit; transition: all 0.15s; }
.source-item:hover { border-color: rgba(0,0,0,0.18); background: #fff; }
.source-num { width: 24px; height: 24px; border-radius: 5px; background: rgba(95,115,85,0.08); color: #5F7355; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; }
.source-name { font-size: 14px; font-weight: 500; color: #3D3F43; margin: 0 0 2px; line-height: 1.4; }
.source-url { font-size: 11px; color: #8A857B; font-family: ui-monospace, 'SF Mono', Consolas, monospace; }
.source-ext { color: #8A857B; font-size: 13px; }
.sources-side { position: sticky; top: 96px; }
.sources-side-eyebrow { font-size: 11px; color: #8A857B; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; margin: 0 0 14px; }
.sources-side-list { display: flex; flex-direction: column; gap: 6px; border-left: 0.5px solid rgba(0,0,0,0.1); }
.sources-side-item { display: block; padding: 10px 14px; font-size: 13px; line-height: 1.45; color: #4D5054; text-decoration: none; border-left: 1px solid transparent; margin-left: -0.5px; transition: all 0.15s; }
.sources-side-item:hover { color: #5F7355; border-left-color: #5F7355; }
.sources-side-cat { font-size: 10px; color: #8A857B; letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-bottom: 3px; }
.sources-side-title { font-weight: 500; font-size: 13px; }
.related-articles { padding: 80px 0; background: #fff; }
.related-h2 { font-size: 28px; font-weight: 500; letter-spacing: -0.018em; margin: 0 0 32px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.related-card { background: #F3ECE3; border-radius: 12px; overflow: hidden; border: 0.5px solid rgba(0,0,0,0.06); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: all 0.2s; }
.related-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -8px rgba(0,0,0,0.08); }
.related-img { aspect-ratio: 16/10; background-size: cover; background-position: center; }
.related-body { padding: 22px 24px 24px; }
.related-cat { font-size: 11px; color: #5F7355; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; display: block; }
.related-title { font-size: 17px; font-weight: 500; margin: 0 0 12px; line-height: 1.3; letter-spacing: -0.01em; }
.related-meta { display: flex; gap: 12px; font-size: 12px; color: #8A857B; padding-top: 12px; border-top: 0.5px solid rgba(0,0,0,0.06); }
.footer { background: #E9DECF; padding: 64px 0 36px; border-top: 0.5px solid rgba(0,0,0,0.06); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.foot-claim { font-size: 13px; color: #6B6862; margin: 12px 0 0; line-height: 1.6; max-width: 88%; }
.foot-title { font-size: 13px; font-weight: 500; margin: 0 0 16px; }
.foot-links { display: flex; flex-direction: column; gap: 9px; }
.foot-link { font-size: 13px; color: #6B6862; text-decoration: none; }
.foot-bottom { padding-top: 28px; border-top: 0.5px solid rgba(0,0,0,0.08); display: flex; justify-content: space-between; font-size: 12px; color: #8A857B; }
.cta-quiz { padding: 96px 0; background: #3D3F43; color: #fff; }
.cta-quiz-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; }
.cta-quiz-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #A4B29B; padding: 5px 12px; background: rgba(79,209,166,0.1); border-radius: 100px; margin-bottom: 18px; font-weight: 500; letter-spacing: 0.02em; }
.cta-quiz-eb-dot { width: 5px; height: 5px; border-radius: 50%; background: #A4B29B; }
.cta-quiz-h2 { font-size: 36px; font-weight: 500; line-height: 1.15; letter-spacing: -0.022em; margin: 0 0 18px; color: #fff; }
.cta-quiz-h2 em { font-style: normal; color: #8A857B; font-weight: 400; }
.cta-quiz-lead { font-size: 17px; color: #B8B0A2; line-height: 1.6; margin: 0 0 24px; }
.cta-quiz-foot { display: flex; gap: 22px; font-size: 13px; color: #8A857B; flex-wrap: wrap; }
.cta-quiz-foot-item { display: flex; align-items: center; gap: 6px; }
.cta-quiz-foot-item i { color: #A4B29B; }
/* USUNIETE 2026-08-04 - ciemny wariant quizu z makiety: .quiz-card, .quiz-q,
   reguly .quiz-progress oraz duplikaty .quiz-options, .quiz-option, .quiz-result
   i .quiz-restart. Zaden szablon nie uzywal tych klas, a poniewaz blok stal NIZEJ
   w pliku, wygrywal w kaskadzie i psul dzialajacy jasny quiz: display none na
   .quiz-result ukrywalo ekran wyniku (pusta biala karta po 3. pytaniu na stronach
   "Jak oglosic upadlosc" i "Spirala dlugow"), a bialy kolor na .quiz-option-text
   dawal bialy tekst na bialej karcie. Wlasciwe reguly sa w liniach ~172-193.
   UWAGA: bez gwiazdek i ukosnikow w tresci komentarza - ciag gwiazdka-ukosnik
   zamyka komentarz przedwczesnie i unieszkodliwia caly dalszy CSS. */
@media (max-width: 1024px) {
  .container, .container-narrow { padding: 0 32px; }
  .article-hero { padding: 32px 0 56px; }
  .article-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .article-hero-img { max-width: 600px; }
  .article-h1 { font-size: 34px; }
  .article-body { padding: 48px 0; }
  .article-layout { grid-template-columns: 1fr; gap: 32px; }
  .toc { position: static; padding-bottom: 16px; border-bottom: 0.5px solid rgba(0,0,0,0.1); }
  .toc-list { flex-direction: row; flex-wrap: wrap; border-left: 0; gap: 0; }
  .toc-link { padding: 6px 12px; border: 0.5px solid rgba(0,0,0,0.1); border-radius: 100px; margin: 0 4px 6px 0; }
  .toc-link.is-active { border-color: #5F7355; color: #5F7355; background: rgba(95,115,85,0.05); }
  .article-content { max-width: 100%; }
  .article-content h2 { font-size: 24px; }
  .article-faq, .related-articles { padding: 48px 0; }
  .article-faq-h2, .related-h2 { font-size: 24px; }
  .related-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 720px) {
  .container, .container-narrow { padding: 0 20px; }
  .article-h1 { font-size: 26px; }
  .article-content p, .article-content ul, .article-content ol { font-size: 16px; }
  .article-content h2 { font-size: 22px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
      .cta-quiz { padding: 56px 0; }
      .cta-quiz-grid { grid-template-columns: 1fr; gap: 40px; }
      .cta-quiz-h2 { font-size: 26px; }
      .quiz-card { padding: 28px; }
    }


/* --- Strefa hub: narzędzia (wyszukiwarka + sort) --- */
.articles-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.articles-search { position: relative; display: flex; align-items: center; }
.articles-search i { position: absolute; left: 12px; color: #8A857B; font-size: 16px; pointer-events: none; }
.articles-search input { padding: 9px 14px 9px 36px; border: 1px solid #DED0BC; border-radius: 9px; background: #fff; font-size: 14px; color: #3D3F43; min-width: 220px; font-family: inherit; }
.articles-search input:focus { outline: none; border-color: #5F7355; box-shadow: 0 0 0 3px rgba(95,115,85,0.12); }
.articles-empty { grid-column: 1 / -1; text-align: center; color: #8A857B; padding: 32px 0; }
.poradniki-empty { color: #8A857B; padding: 16px 0; }
.topic-card.is-active { border-color: #5F7355; background: #fff; }

@media (max-width: 640px) {
  .articles-search input { min-width: 0; width: 100%; }
  .articles-tools { width: 100%; }
}


/* --- Newsletter: formularz (zgoda RODO + status) --- */
.nl-form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.nl-form-row .nl-input { flex: 1; min-width: 200px; }
.nl-consent { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.82); cursor: pointer; }
.nl-consent input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; }
/* DODANE 2026-08-04 — link do polityki prywatności w zgodzie newslettera nie miał
   żadnej reguły, więc dostawał domyślny niebieski #0000EE na ciemnym tle sekcji
   (kontrast 1.12, praktycznie nieczytelny). Kolor z palety marki. */
.nl-consent a { color: #E9DECF; text-decoration: underline; text-underline-offset: 2px; }
.nl-consent a:hover { color: #fff; }
.nl-status { margin-top: 10px; font-size: 14px; min-height: 1.2em; }
.nl-status.is-pending { color: rgba(255,255,255,0.7); }
.nl-status.is-ok { color: #C8E6C0; }
.nl-status.is-error { color: #F2C4C4; }


/* ============================================================
   404 / WYSZUKIWANIE / ARCHIWUM FILARU
   ============================================================ */

/* --- 404 --- */
.page-404 .error-hero { padding: 100px 0 120px; background: linear-gradient(180deg, #F3ECE3 0%, #FAFAF7 100%); }
.error-eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5F7355; margin-bottom: 16px; }
.error-h1 { font-size: 38px; font-weight: 500; letter-spacing: -0.022em; line-height: 1.15; color: #3D3F43; margin: 0 0 18px; max-width: 680px; }
.error-lead { font-size: 18px; color: #4D5054; line-height: 1.55; max-width: 560px; margin: 0 0 40px; }
.error-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 720px; margin-bottom: 36px; }
.error-link { display: flex; align-items: center; gap: 16px; padding: 20px; background: #fff; border: 1px solid #DED0BC; border-radius: 12px; text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.error-link:hover { border-color: #5F7355; transform: translateY(-2px); }
.error-link i { font-size: 26px; color: #5F7355; flex-shrink: 0; }
.error-link span { display: flex; flex-direction: column; }
.error-link strong { color: #3D3F43; font-size: 16px; font-weight: 500; }
.error-link span { font-size: 13px; color: #8A857B; }
.error-link strong { margin-bottom: 2px; }
.error-search { display: flex; align-items: center; gap: 10px; max-width: 480px; position: relative; }
.error-search i { position: absolute; left: 14px; color: #8A857B; font-size: 18px; }
.error-search input { flex: 1; padding: 12px 14px 12px 42px; border: 1px solid #DED0BC; border-radius: 9px; background: #fff; font-size: 15px; font-family: inherit; color: #3D3F43; }
.error-search input:focus { outline: none; border-color: #5F7355; box-shadow: 0 0 0 3px rgba(95,115,85,0.12); }
.error-search button { padding: 12px 22px; background: #3D3F43; color: #fff; border: none; border-radius: 9px; font-size: 15px; font-weight: 500; cursor: pointer; font-family: inherit; }
.error-search button:hover { background: #4D5054; }

/* --- Wyszukiwanie --- */
.search-hero { padding: 80px 0 40px; background: #F3ECE3; }
.search-eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5F7355; margin-bottom: 14px; }
.search-h1 { font-size: 34px; font-weight: 500; letter-spacing: -0.02em; color: #3D3F43; margin: 0 0 10px; }
.search-lead { font-size: 16px; color: #8A857B; margin: 0 0 28px; }
.search-bar { display: flex; align-items: center; gap: 10px; max-width: 560px; position: relative; }
.search-bar i { position: absolute; left: 14px; color: #8A857B; font-size: 18px; }
.search-bar input { flex: 1; padding: 13px 14px 13px 42px; border: 1px solid #DED0BC; border-radius: 9px; background: #fff; font-size: 15px; font-family: inherit; color: #3D3F43; }
.search-bar input:focus { outline: none; border-color: #5F7355; box-shadow: 0 0 0 3px rgba(95,115,85,0.12); }
.search-bar button { padding: 13px 24px; background: #3D3F43; color: #fff; border: none; border-radius: 9px; font-size: 15px; font-weight: 500; cursor: pointer; font-family: inherit; }
.search-bar button:hover { background: #4D5054; }
.search-results { padding: 48px 0 90px; }
.search-list { display: flex; flex-direction: column; gap: 16px; max-width: 800px; }
.search-item { display: block; padding: 22px 24px; background: #fff; border: 1px solid #E9DECF; border-radius: 12px; text-decoration: none; transition: border-color 0.15s; }
.search-item:hover { border-color: #5F7355; }
.search-item-type { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #5F7355; margin-bottom: 8px; }
.search-item-title { font-size: 20px; font-weight: 500; color: #3D3F43; margin: 0 0 8px; }
.search-item-excerpt { font-size: 15px; color: #4D5054; line-height: 1.55; margin: 0; }
.search-empty { max-width: 600px; padding: 20px 0; }
.search-empty-title { font-size: 20px; font-weight: 500; color: #3D3F43; margin: 0 0 8px; }
.search-empty p { color: #4D5054; line-height: 1.6; }
.search-empty a, .search-pagination a { color: #5F7355; }
.search-pagination { margin-top: 36px; }
.search-pagination .page-numbers { display: inline-block; padding: 8px 14px; margin-right: 6px; border: 1px solid #DED0BC; border-radius: 8px; text-decoration: none; color: #4D5054; }
.search-pagination .page-numbers.current { background: #5F7355; color: #fff; border-color: #5F7355; }

/* --- Archiwum filaru --- */
.filar-hero { padding: 72px 0 36px; background: #F3ECE3; }
.filar-eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5F7355; margin: 14px 0; }
.filar-h1 { font-size: 38px; font-weight: 500; letter-spacing: -0.022em; color: #3D3F43; margin: 0 0 12px; }
.filar-lead { font-size: 17px; color: #4D5054; line-height: 1.55; max-width: 600px; margin: 0; }
.filar-articles { padding: 48px 0 90px; }
.filar-back { margin-top: 40px; }

@media (max-width: 640px) {
  .error-h1 { font-size: 28px; }
  .error-links { grid-template-columns: 1fr; }
  .search-h1, .filar-h1 { font-size: 26px; }
  .error-search { flex-wrap: wrap; }
}

/* ============================================================
   TŁO HERO — jedna reguła dla wszystkich podstron
   Zdjęcie ustawiane per strona: meta hero_bg_image → zmienna --hero-bg
   (panel: Po Sprawie → Bank zdjęć, albo kolumna hero_bg_image w CSV).
   Brak zdjęcia = czysty gradient, bez pustej ramki.
   ============================================================ */
.hero-bg { position: absolute; top: 0; left: 0; right: 0; height: 100%; overflow: hidden; z-index: 0; pointer-events: none; }
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--hero-bg, none);
  background-size: cover; background-position: right center; background-repeat: no-repeat;
  transform: scaleX(-1); z-index: 0;
}
/* Rozjaśnienie od lewej — tekst hero pozostaje czytelny na zdjęciu */
.hero-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(243,236,227,0.86) 0%, rgba(243,236,227,0.78) 30%, rgba(243,236,227,0.60) 60%, rgba(243,236,227,0.46) 100%);
}
/* Treść hero zawsze nad warstwą tła */
.hero > .container, .hero-grid, .hero-content { position: relative; z-index: 2; }

/* Karty interaktywne w hero — lekki prześwit na zdjęcie.
   Wszystkie widgety hero to <aside> w siatce .hero-grid, więc jedna reguła. */
.hero .hero-grid > aside {
  background-color: rgba(255,255,255,0.90);
  backdrop-filter: saturate(115%) blur(10px);
  -webkit-backdrop-filter: saturate(115%) blur(10px);
}