/* Radar Studio: uzupelnienia ukladu wzoru (wspolne dla wygladu A i B). */

/* Znak marki: kolo z punktem zamiast znaku wzoru */
.logo-mark{border-radius:50%}
.logo-mark::after{right:-6px;top:-6px;bottom:auto;width:10px;height:10px;border-radius:50%}

/* Akcent jednego slowa w naglowku (konwencja CMO *slowo*) */
.ak{font-family:"Olcha Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--red)}
.dark .ak{color:var(--red-on-dark)}

/* Hero: dluzsze H1 niz we wzorze, wiec mniejszy krok i szersza kolumna na koncepcje */
.hero-title{font-size:clamp(2.6rem,5.2vw,5.6rem);max-width:15ch}
.hero-copy{grid-column:1/span 7}
.hero-lead{grid-template-columns:1fr;gap:24px}
.hero-txt p{font-size:1.25rem;line-height:1.5;color:var(--ink)}
.hero-txt .hero-sub{margin-top:10px;font-size:1rem;color:var(--muted);max-width:52ch}
.hero-micro{margin-top:12px;font-size:.9rem;color:var(--muted)}
.hero-koncepcja{grid-column:8/span 5;align-self:center}
.hero-koncepcja picture{aspect-ratio:1400/850;background:var(--panel)}
.hero-koncepcja img{object-position:50% 0}
.hero-koncepcja .oc-body{padding:12px 16px}
.facts b{font-size:clamp(1.15rem,1.6vw,1.5rem)}

/* Dla kogo: trzy punkty z checkmarkiem */
.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.checks li{display:grid;gap:14px;padding-top:18px;border-top:2px solid var(--ink);font:600 1.15rem/1.4 var(--display);letter-spacing:-.02em}
.checks svg{width:30px;height:30px;color:var(--red)}
.checks svg path{stroke-width:2.4}
.checks-line{margin-top:clamp(28px,4vw,48px);font:700 clamp(1.5rem,2.4vw,2.1rem)/1.15 var(--display);letter-spacing:-.04em}

/* Pakiety: dwie karty, cena, przycisk */
.plans-2{grid-template-columns:repeat(2,1fr)}
.plan-price{margin-top:10px;font-size:1rem;color:var(--muted)}
.plan-price b{font:800 clamp(2rem,3vw,2.6rem)/1 var(--display);letter-spacing:-.04em;color:var(--ink)}
.plan-main .plan-price{color:#cfcfcf}
.plan-main .plan-price b{color:#fff}
.plan .plan-d{margin:0 0 22px;color:var(--ink-2)}
.plan-main .plan-d{color:#e4e4e4}
.plan .plan-d b{color:inherit}
.plan .btn{margin-top:auto;align-self:flex-start}
.plan-main .btn-red:hover{background:#fff;color:var(--ink)}
.plans-note{margin-top:22px;font-size:.98rem;color:var(--muted)}

/* Od makiety do strony: makieta wzoru bez liczb, z tekstami CMO (uzupelnienia 2) */
.mk-badge{margin-left:10px;padding:3px 7px;background:var(--ink);color:#fff;font:700 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.mk-p{height:6cqw}
.mk-logo .tx{font-size:2.2cqw}
.stage.s3 .mk-p .sk,.stage.s3 .mk-card .sk,.stage.s3 .mk-links .sk{opacity:1;background:#a9a9a4}
.stage.s4 .mk-p .sk,.stage.s4 .mk-card .sk,.stage.s4 .mk-links .sk{background:#c9bba3}
.stage.s4 .mk-img{background:#1e3a2f}
.mk-ready{position:absolute;right:3cqw;bottom:3cqw;z-index:3;display:flex;align-items:center;gap:1.2cqw;padding:1.6cqw 2.2cqw;background:#fff;border:1px solid var(--ink);font:700 max(11px,1.7cqw)/1 var(--sans);color:var(--ink);opacity:0;transform:translateY(3cqw);transition:opacity .6s var(--ease),transform .8s var(--ease-out)}
.mk-ready::before{content:"";width:1.4cqw;height:1.4cqw;min-width:8px;min-height:8px;border-radius:50%;background:#1a7f4b}
.stage.s5 .mk-ready{opacity:1;transform:none}
.ss-get{margin-top:18px}

/* Przyklady: decyzja projektowa pod branza (uzupelnienia 5) */
.concept-d{margin-top:6px;color:var(--ink-2);line-height:1.5}

/* Kto: dwie osoby */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,340px));gap:var(--gutter)}
.person{grid-column:auto}
.person picture{aspect-ratio:1}
.person img{object-position:50% 20%}
.oc-who{font-size:.95rem;line-height:1.45;color:var(--ink-2)}
.oc-who .oc-name{display:inline;margin:0;color:var(--ink)}
.people-line{margin-top:28px;font:700 clamp(1.3rem,2vw,1.7rem)/1.2 var(--display);letter-spacing:-.03em}

/* Bezplatny podglad (slot raportu wzoru): punkty i karta bez wynikow */
.raport-points{display:grid;gap:10px;margin:-6px 0 30px}
.raport-points li{display:grid;grid-template-columns:22px 1fr;gap:10px;color:#e0e0e0;line-height:1.5}
.raport-points li::before{content:"";width:10px;height:10px;margin-top:.5em;background:var(--red-on-dark)}
.rc-rows li{grid-template-columns:1fr auto;padding-bottom:12px;border-bottom:1px solid #333}
.rc-rows b{grid-row:auto;font:600 .8rem/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:#bdbdbd}

/* Formularz: wybor potrzeby jako przyciski */
.chips{margin:0 0 24px;padding:0;border:0;min-width:0}
.chips legend{padding:0;margin-bottom:12px;font-weight:700}
.chips .opt{min-height:52px}
.form-note{margin-top:14px;font-size:.88rem;line-height:1.5;color:var(--muted)}
.field-err{margin-top:6px;font-size:.84rem;font-weight:700;color:var(--red-ink)}
.field input::placeholder{color:var(--muted);opacity:0;transition:opacity .2s}
.field input:focus::placeholder{opacity:1}
.after ol{padding-top:12px}
.footer-dane{font-size:.85rem}
.q-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.q-nav .q-next{margin-top:22px}
.form-status{margin-top:16px;padding:14px 16px;border-left:4px solid var(--red);background:var(--panel);font-weight:700}
.koncepcje .concept-open{cursor:default}

/* Etykieta tekstu roboczego (widoczna tylko w podgladzie) */
[data-tekst="roboczy"]{position:relative;outline:1.5px dashed rgba(200,140,0,.65);outline-offset:6px}
[data-tekst="roboczy"]::before{content:"tekst roboczy";position:absolute;top:0;right:0;z-index:6;padding:4px 7px;background:#ffd84d;color:#111;font:700 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;pointer-events:none}

.grid-toggle[data-tekst="roboczy"]::before{top:auto;bottom:calc(100% + 8px)}

@media (max-width:1180px){
  .hero-copy{grid-column:1/span 7}
  .hero-koncepcja{grid-column:8/span 5}
}
@media (max-width:1023px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-grid>*{grid-column:1!important}
  .checks{grid-template-columns:1fr}
  .plans-2{grid-template-columns:1fr}
}
@media (max-width:767px){
  .hero-title{font-size:clamp(2.1rem,9.6vw,3rem)}
  .hero-txt p{font-size:1.1rem}
  .hero-koncepcja{display:block}
  .hero-koncepcja picture{height:auto;aspect-ratio:1400/850}
  .hero-koncepcja .oc-body{border-left:0;border-top:3px solid var(--red)}
  .facts b{font-size:1.1rem}
  .checks li{font-size:1.05rem}
  .plans-2{display:grid;overflow:visible;margin:0;padding:0}
  .plans-2 .plan{flex:none}
  .plan .btn{align-self:stretch}
  .people{grid-template-columns:1fr 1fr;gap:12px}
  .person .oc-body{padding:12px;border-left:0;border-top:3px solid var(--red)}
  .person{display:block}
  .person picture{height:auto}
  .person .oc-who{font-size:.85rem}
  .raport-copy .btn{width:100%}
  .btn{padding:0 18px;text-align:center}
  .hero-actions .btn{white-space:normal;line-height:1.2;padding-block:12px}
  .chips .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chips .opt{min-width:0;padding:10px 12px;gap:10px}
}
/* Odbior r2 (N3): na telefonie nadtytul hero CMO pokazuje obie czesci. */
@media (max-width:767px){.hero-meta span:nth-child(2){display:inline}}
/* Zgoda i pole-pulapka formularzy (wspolne/zgloszenie.js) */
.zgoda{display:flex;gap:10px;align-items:flex-start;margin:16px 0;font-size:.9rem;line-height:1.45;cursor:pointer}
.zgoda input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--red-ink)}
.zgoda a{text-decoration:underline}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}