/* Transformacja (wdrożenia dla firm), arkusz akcentu FRAME.
   Sekcja 1: kanon klocków skopiowany z nxtlvl-frame.css (kanon /marketing, docs/FRAME_KANON_SEKCJI.md).
   Sekcja 2: klocki własne strony; HTML, identyfikatory formularza i zakładek bez zmian (zasada 0E). */

body.mkt-page { --mkt-muted: oklch(42% 0.018 295); --mkt-line: oklch(88% 0.01 295); --mkt-orange: oklch(70% 0.19 45); overflow-x: visible; }
.mkt-main :where(h1, h2, h3, p, figure, ul) { margin: 0; }
.mkt-main :is(h1, h2, h3) { font-weight: 600; letter-spacing: -.035em; }
.mkt-main h2 { font-size: clamp(1.875rem, 3.6vw, 2.75rem); line-height: 1.12; }
.mkt-main p { line-height: 1.65; color: var(--mkt-muted); }
.mkt-main ul { padding: 0; list-style: none; }
.mkt-main section { padding-block: 4.5rem 5.5rem; scroll-margin-top: 6rem; }
.mkt-main .container { width: 100%; }
.mkt-main .eyebrow { margin-bottom: 1.25rem; font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--frame-ink); }
.mkt-main .eyebrow::before { content: ""; display: inline-block; width: .625rem; height: .625rem; margin-right: .625rem; background: var(--frame-violet); vertical-align: .05em; }
.mkt-main .lead { font-size: 1.125rem; margin-block: 1.5rem 2rem; text-wrap: wrap; }
.mkt-main :where(p) { text-wrap: wrap; }
.mkt-main :where(blockquote) { margin: 0; }
.mkt-main h1 { font-size: clamp(2.375rem, 4.6vw, 3.625rem); line-height: 1.08; }
.hero2 { padding-block: 4.5rem 0; }
.hero2-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; padding-bottom: 3.5rem; }
.hero2-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.mkt-main .btn2 { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: .875rem 1.25rem; border: 1px solid var(--frame-ink); text-decoration: none; font-size: .9375rem; font-weight: 600; line-height: 1.5; color: var(--frame-ink); }
.mkt-main .btn2-primary { background: var(--frame-violet); }
.mkt-main .btn2:hover { background: var(--frame-ink); color: var(--frame-canvas); }
.hero2-img img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
@media (max-width: 900px) {
  .hero2 { padding-top: 3rem; }
  .hero2-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* ===== Mapowanie klas tf-* na kanon ===== */
.tf-page .tf-container { width: 100%; }
.tf-page .tf-section { padding-block: 4.5rem 5.5rem; scroll-margin-top: 6rem; }
.tf-page .tf-hero { padding-block: 4.5rem 5.5rem; }
.tf-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
.tf-hero-img { display: block; width: 100%; max-width: 34rem; height: auto; mix-blend-mode: multiply; }
.tf-hero-right { display: flex; justify-content: center; }
.tf-eyebrow { margin-bottom: 1.25rem; font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--frame-ink); }
.tf-eyebrow::before { content: ""; display: inline-block; width: .625rem; height: .625rem; margin-right: .625rem; background: var(--frame-violet); vertical-align: .05em; }
.tf-heading-xl { font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: 1.05; font-weight: 600; letter-spacing: -.035em; margin: 0; }
.tf-heading-lg { font-size: clamp(2rem, 3.5vw, 3.2rem); line-height: 1.12; font-weight: 600; letter-spacing: -.035em; margin: 0; }
.tf-lead { font-size: 1.125rem; line-height: 1.65; color: var(--mkt-muted); margin-block: 1.5rem 2rem; }
.tf-section-head-center { max-width: 46rem; margin: 0 auto 3rem; text-align: center; }
.tf-section-head-center .tf-lead { margin-bottom: 0; }
.tf-btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }
.tf-btn { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: .875rem 1.25rem; border: 1px solid var(--frame-ink); text-decoration: none; font-size: .9375rem; font-weight: 600; line-height: 1.5; color: var(--frame-ink); background: transparent; }
.tf-btn-primary { background: var(--frame-violet); }
.tf-btn:hover { background: var(--frame-ink); color: var(--frame-canvas); }
.tf-hero-trust-strip { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--frame-ink); }
.tf-trust-item { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; color: var(--mkt-muted); }
.tf-trust-item svg { width: 1rem; height: 1rem; color: var(--frame-violet); flex: none; }

/* Trzy obszary: zakładki jako komórki w ramie, panel w ramie */
.tf-pillar-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--frame-ink); border-bottom: 0; }
.tf-pillar-tab { display: flex; align-items: center; gap: .875rem; text-align: left; padding: 1rem 1.25rem; background: transparent; border: 0; font: inherit; color: var(--frame-ink); cursor: pointer; }
.tf-pillar-tab + .tf-pillar-tab { border-left: 1px solid var(--frame-ink); }
.tf-pillar-tab:hover { background: color-mix(in oklch, var(--frame-violet) 12%, transparent); }
.tf-pillar-tab.is-active { background: color-mix(in oklch, var(--frame-violet) 22%, transparent); }
.tf-tab-num { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex: none; border: 1px solid var(--frame-ink); font-weight: 600; }
.tf-pillar-tab.is-active .tf-tab-num { background: var(--frame-violet); }
.tf-tab-text { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.tf-tab-text strong { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.tf-tab-text > span { font-size: .875rem; color: var(--mkt-muted); }
.tf-pillar-panel { display: none; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; padding: 2.5rem; border: 1px solid var(--frame-ink); }
.tf-pillar-panel.is-active { display: grid; }
.tf-pillar-panel-media img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.tf-pillar-tag { display: block; margin-bottom: 1rem; font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.tf-pillar-panel-body h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; margin: 0 0 .75rem; }
.tf-pillar-body { line-height: 1.65; color: var(--mkt-muted); margin-bottom: 1.5rem; }
.tf-pillar-deliverables { display: grid; gap: .75rem; padding: 1.25rem 0 0; margin: 0; list-style: none; border-top: 1px solid var(--frame-ink); }
.tf-pillar-deliverables li { display: flex; align-items: center; gap: .75rem; font-size: 1rem; color: var(--frame-ink); }
.tf-pillar-deliverables svg { width: 1rem; height: 1rem; color: var(--frame-violet); flex: none; }
.tf-pillar-product { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--mkt-line); font-size: .9375rem; color: var(--mkt-muted); }

/* Co dzieje się po zgłoszeniu: trzy komórki w jednej ramie */
.tf-journey-line { display: none; }
.tf-process-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--frame-ink); }
.tf-process-card { display: flex; flex-direction: column; padding: 1.75rem; }
.tf-process-card + .tf-process-card { border-left: 1px solid var(--frame-ink); }
.tf-process-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.tf-process-num { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background: var(--frame-violet); font-weight: 600; }
.tf-process-time { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mkt-muted); }
.tf-process-card h4 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; margin: 0 0 1rem; }
.tf-process-media { margin: 0 0 1rem; }
.tf-process-media img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.tf-process-scope { margin-top: .75rem; font-size: .9375rem; color: var(--mkt-muted); }
.tf-process-scope strong { display: block; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--frame-ink); margin-bottom: .125rem; }
.tf-process-card p { margin: 0; font-size: .9375rem; }

/* Porównanie podejścia */
.tf-versus-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--frame-ink); margin-bottom: 1.5rem; }
.tf-versus-card { display: flex; flex-direction: column; }
.tf-versus-card + .tf-versus-card { border-left: 1px solid var(--frame-ink); }
.tf-versus-media { position: relative; }
.tf-versus-media img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

.tf-versus-time { position: absolute; top: 1rem; left: 1rem; padding: .375rem .75rem; border: 1px solid var(--frame-ink); background: var(--frame-canvas); font-size: .8125rem; font-weight: 600; }
.tf-versus-time-accent { background: var(--frame-violet); }
.tf-versus-caption { padding: 1.25rem 1.5rem; font-size: .9375rem; line-height: 1.55; color: var(--mkt-muted); border-top: 1px solid var(--frame-ink); }
.tf-versus-caption strong { color: var(--frame-ink); }
.tf-versus-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--frame-ink); }
.tf-versus-point { display: flex; flex-direction: column; gap: .375rem; padding: 1.5rem 1.75rem; }
.tf-versus-point + .tf-versus-point { border-left: 1px solid var(--frame-ink); }
.tf-versus-point-num { font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--frame-violet); }
.tf-versus-point strong { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.tf-versus-point span { font-size: .9375rem; color: var(--mkt-muted); }

/* Formularz */
.tf-form-card { max-width: 42rem; margin: 0 auto; padding: 2rem; border: 1px solid var(--frame-ink); }
.tf-form-stack { display: grid; gap: 1.25rem; }
.tf-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tf-field-group { display: flex; flex-direction: column; gap: .5rem; }
.tf-field-label { font-size: .9375rem; font-weight: 600; }
.tf-input, .tf-textarea { width: 100%; padding: .875rem 1rem; border: 1px solid var(--frame-ink); background: var(--frame-canvas); font: inherit; font-size: 1rem; color: var(--frame-ink); box-sizing: border-box; }
.tf-input:focus, .tf-textarea:focus { outline: 3px solid var(--frame-violet); outline-offset: 2px; }
.tf-input.error, .tf-textarea.error { border-color: #b3261e; }
.tf-textarea { min-height: 6rem; resize: vertical; }
.tf-input::placeholder, .tf-textarea::placeholder { color: var(--mkt-muted); opacity: 1; }
.tf-checkbox-label { display: flex; align-items: flex-start; gap: .625rem; font-size: .9375rem; color: var(--mkt-muted); line-height: 1.5; cursor: pointer; }
.tf-checkbox-label input[type="checkbox"] { accent-color: var(--frame-violet); width: 1rem; height: 1rem; margin-top: .2rem; flex: none; }
.tf-checkbox-label a { color: var(--frame-ink); }
.tf-form-error { display: none; margin-top: .125rem; font-size: .8125rem; color: #b3261e; }
.tf-form-error.visible { display: block; }
.tf-page .frame-button { display: inline-flex; justify-content: center; align-items: center; width: 100%; min-height: 48px; padding: .875rem 1.25rem; border: 1px solid var(--frame-ink); background: var(--frame-violet); font: inherit; font-size: 1rem; font-weight: 600; color: var(--frame-ink); cursor: pointer; }
.tf-page .frame-button:hover { background: var(--frame-ink); color: var(--frame-canvas); }
.tf-submit-status { margin-top: 1rem; padding: .75rem 1rem; font-size: .9375rem; line-height: 1.5; border: 1px solid var(--frame-ink); }
.tf-submit-status.is-error { border-color: #b3261e; color: #b3261e; }
.tf-success-card { text-align: center; padding: 2.5rem 1rem; }
.tf-success-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; margin-bottom: 1rem; background: var(--frame-violet); color: var(--frame-ink); }
.tf-success-icon svg { width: 1.5rem; height: 1.5rem; }
.tf-success-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; margin: 0 0 .5rem; }
.tf-success-msg { max-width: 28rem; margin: 0 auto; color: var(--mkt-muted); line-height: 1.6; }
.tf-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tf-page [hidden] { display: none; }
.tf-page a:focus-visible, .tf-page button:focus-visible, .tf-page input:focus-visible, .tf-page textarea:focus-visible { outline: 3px solid var(--frame-violet); outline-offset: 3px; }

@media (max-width: 960px) {
  .tf-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .tf-pillar-tabs { grid-template-columns: minmax(0, 1fr); }
  .tf-pillar-tab + .tf-pillar-tab { border-left: 0; border-top: 1px solid var(--frame-ink); }
  .tf-pillar-panel { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem; }
  .tf-process-grid, .tf-versus-grid, .tf-versus-points { grid-template-columns: minmax(0, 1fr); }
  .tf-process-card + .tf-process-card, .tf-versus-card + .tf-versus-card, .tf-versus-point + .tf-versus-point { border-left: 0; border-top: 1px solid var(--frame-ink); }
  .tf-hero-trust-strip { flex-direction: column; gap: .625rem; }
}
@media (max-width: 600px) {
  .tf-page .tf-section, .tf-page .tf-hero { padding-block: 3rem 3.5rem; }
  .tf-row-2 { grid-template-columns: 1fr; }
  .tf-form-card { padding: 1.5rem 1.25rem; }
  .tf-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .tf-page * { animation: none; transition: none; } }