body.as-page { --mkt-muted: oklch(42% 0.018 295); --mkt-line: oklch(88% 0.01 295); --mkt-orange: oklch(70% 0.19 45); }
/* Pierwszy Asystent AI, arkusz akcentu FRAME. Kanon: docs/FRAME_KANON_SEKCJI.md */
.as-main :where(h1, h2, h3, p, figure, ul, ol, dl, dd) { margin: 0; }
.as-main :is(h1, h2, h3) { font-weight: 600; letter-spacing: -.035em; }
.as-main h1 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1.05; }
.as-main h2 { font-size: clamp(1.75rem, 3.2vw, 2.375rem); line-height: 1.12; }
.as-main p { line-height: 1.65; color: var(--mkt-muted, #4b4a52); }
.as-main ul, .as-main ol { padding: 0; list-style: none; }
.as-main .container { width: 100%; }
.as-main .eyebrow { margin-bottom: 1.25rem; font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--frame-ink); }
.as-main .eyebrow::before { content: ""; display: inline-block; width: .625rem; height: .625rem; margin-right: .625rem; background: var(--frame-violet); vertical-align: .05em; }
.as-main .btn2 { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: .875rem 1.25rem; border: 1px solid var(--frame-ink); background: transparent; text-decoration: none; font: inherit; font-size: 1rem; font-weight: 600; color: var(--frame-ink); cursor: pointer; }
.as-main .btn2-primary { background: var(--frame-violet); }
.as-main .btn2:hover { background: var(--frame-ink); color: var(--frame-canvas); }
.as-main .btn2:disabled { opacity: .45; cursor: not-allowed; }
.as-main .btn2:disabled:hover { background: var(--frame-violet); color: var(--frame-ink); }
.as-main .btn2-ghost:disabled:hover { background: transparent; }
.as-block { width: 100%; }
.prompt-screen { padding-block: 4.5rem 5.5rem; }
.prompt-screen[hidden] { display: none; }
.prompt-screen h1[tabindex="-1"]:focus, .prompt-screen h2[tabindex="-1"]:focus { outline: none; }
/* hero */
.hero2-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
.start-lead { font-size: 1.125rem; margin-block: 1.5rem 2rem; }
.hero2-actions { margin: 0; }
.start-micro { margin-top: 1rem; font-size: .9375rem; }
.as-hero-img img { display: block; width: 100%; max-width: 26rem; height: auto; margin-inline: auto; mix-blend-mode: multiply; }
.as-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3.5rem; border: 1px solid var(--frame-ink); }
.as-steps li { padding: 1.5rem 1.75rem; }
.as-steps li + li { border-left: 1px solid var(--frame-ink); }
.as-steps span { display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: var(--frame-ink); }
.as-steps span::before { content: ""; display: inline-block; width: .625rem; height: .625rem; margin-right: .625rem; background: var(--frame-violet); vertical-align: .15em; }
.as-steps strong { display: block; margin-top: .25rem; font-size: 1.125rem; font-weight: 600; color: var(--frame-ink); }
.as-steps em { display: block; margin-top: .375rem; font-style: normal; font-size: .9375rem; color: var(--mkt-muted, #4b4a52); }
/* kolumna kreatora */
.as-col { display: grid; justify-content: center; }
.as-col-art { grid-template-columns: minmax(0, 18rem) minmax(0, 46rem); gap: 3rem; align-items: start; justify-content: center; }
.as-art { margin: 0; padding-top: 2rem; }
.as-art img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.as-panel { width: 100%; max-width: 46rem; border: 1px solid var(--frame-ink); padding: 2.5rem; }
.gate-copy h2 { margin-bottom: 1rem; }
.gate-wrap form { margin-top: 2rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; margin-bottom: .5rem; font-weight: 600; font-size: .9375rem; }
.as-main input[type="email"], .as-main textarea { width: 100%; padding: .875rem 1rem; border: 1px solid var(--frame-ink); background: #fff; font: inherit; color: var(--frame-ink); }
.as-main textarea { min-height: 7rem; resize: vertical; }
.as-main input:focus, .as-main textarea:focus { outline: 3px solid var(--frame-violet); outline-offset: 2px; }
.field-meta { display: flex; justify-content: space-between; margin-top: .375rem; font-size: .8125rem; color: var(--mkt-muted, #4b4a52); }
.prompt-consent { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1.25rem; font-size: .9375rem; color: var(--mkt-muted, #4b4a52); }
.prompt-consent input { margin-top: .3rem; accent-color: var(--frame-violet); }
.prompt-honeypot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form-error { display: none; margin: 0 0 1rem; font-size: .875rem; color: #b3261e; }
.form-error:not([hidden]) { display: block; }
/* kreator */
.builder-progress-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .75rem; font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.as-back { min-height: 40px; padding: .5rem 1rem; font-size: .875rem; }
.builder-progress { height: 4px; background: var(--mkt-line, #d9d7e0); margin-bottom: 2.5rem; }
.builder-progress-fill { height: 100%; width: 100%; background: var(--frame-violet); transform-origin: left; transform: scaleX(0.33333); transition: transform 220ms ease; }
.builder-step[hidden] { display: none; }
.as-back[hidden] { display: none; }
.builder-step-copy h2 { margin-bottom: .75rem; }
.builder-control-panel { margin-top: 2rem; }
.format-options { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--frame-ink); margin-bottom: 1.25rem; }
.format-option { display: block; text-align: left; padding: 1.25rem 1.5rem; border: 0; border-left: 4px solid transparent; background: transparent; font: inherit; color: var(--frame-ink); cursor: pointer; outline-offset: -3px; }
.format-option:nth-child(n+3) { border-top: 1px solid var(--frame-ink); }
.format-option:nth-child(even) { box-shadow: inset 1px 0 0 var(--frame-ink); }
.format-option:hover { background: #fff; }
.format-option:focus-visible { outline: 3px solid var(--frame-violet); }
.format-option[aria-pressed="true"] { border-left-color: var(--frame-violet); background: color-mix(in oklch, var(--frame-violet) 10%, var(--frame-canvas)); }
.format-name { display: block; font-weight: 600; font-size: 1.0625rem; }
.format-desc { display: block; margin-top: .25rem; font-size: .9375rem; color: var(--mkt-muted, #4b4a52); }
#mode-options { grid-template-columns: 1fr; }
#mode-options .format-option:nth-child(even) { box-shadow: none; }
#mode-options .format-option:nth-child(n+2) { border-top: 1px solid var(--frame-ink); }
/* wynik */
.result-intro { text-align: center; max-width: 46rem; margin-inline: auto; }
.result-lead { font-size: 1.125rem; margin-top: 1rem; }
.result-workspace { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 3rem; margin-top: 3rem; align-items: start; }
.result-sidebar > section, .result-actions { border: 1px solid var(--frame-ink); padding: 1.5rem; }
.result-sidebar > section + section, .result-sidebar > section + .result-actions { border-top: 0; }
.result-sidebar h3 { font-size: 1.125rem; margin-bottom: .75rem; }
.usage-steps ol { list-style: decimal; padding-left: 1.25rem; margin-bottom: 1.25rem; color: var(--mkt-muted, #4b4a52); }
.usage-steps li { margin-bottom: .375rem; }
.copy-status, .contact-intent-status { margin-top: .75rem; font-size: .875rem; color: var(--frame-ink); }
.assistant-summary { display: grid; gap: .75rem; margin-block: 1rem; }
.assistant-summary dt { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--mkt-muted, #4b4a52); }
.assistant-summary dd { color: var(--frame-ink); }
.assistant-explainer details summary { cursor: pointer; font-weight: 600; }
.assistant-explainer details ol { list-style: decimal; padding-left: 1.25rem; margin-top: .75rem; color: var(--mkt-muted, #4b4a52); font-size: .9375rem; }
.contact-intent p { font-size: .9375rem; margin-bottom: 1rem; }
.result-actions { display: grid; gap: .75rem; }
.prompt-result { border: 1px solid var(--frame-ink); }
.prompt-result-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--frame-ink); font-weight: 600; }
.prompt-result-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: .2rem .5rem; border: 1px solid var(--frame-ink); }
#assistant-output { padding: 1.5rem; max-height: 70vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .875rem; line-height: 1.65; background: #fff; }
@media (max-width: 900px) {
  .prompt-screen { padding-block: 3rem 3.5rem; }
  .hero2-grid, .as-steps, .format-options, .result-workspace { grid-template-columns: minmax(0, 1fr); }
  .as-steps li + li { border-left: 0; border-top: 1px solid var(--frame-ink); }
  .as-col-art { grid-template-columns: minmax(0, 1fr); }
  .as-art { display: none; }
  .as-panel { padding: 1.5rem; }
  .format-option:nth-child(even) { box-shadow: none; }
  .format-option:nth-child(n+2) { border-top: 1px solid var(--frame-ink); }
}