/* Tokeny (kolory, fonty, wymiary) są w tokens.css - wspólne dla całego serwisu. */
*{box-sizing:border-box}

html{scroll-behavior:smooth;max-width:100%}

body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.5}

button,input,textarea{font:inherit}

button,a{transition:.2s ease}

a{color:inherit;text-decoration:none}

img{max-width:100%;display:block}

.brand{display:flex;gap:11px;align-items:center}

.brand strong{display:block;font-size:12.8px;letter-spacing:.08em}

.brand small{display:block;font-size:10px;color:var(--muted);margin-top:2px}

.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border:1px solid transparent;border-radius:999px;font-weight:800;cursor:pointer}

.button-dark{background:var(--ink);color:#fff}

.button-dark:hover{background:#30353a;transform:translateY(-1px)}

.button-accent{background:var(--accent);color:var(--ink);box-shadow:0 10px 30px rgba(160,200,40,.2)}

.button-accent:hover{filter:brightness(.94);transform:translateY(-2px)}

.button-outline{border-color:var(--ink);background:transparent}

.button-outline:hover{background:var(--ink);color:#fff}

.button-ghost{border-color:var(--line);background:#fff}

.button-ghost:hover{border-color:var(--ink)}

.button-full{width:100%}

.text-link{font-weight:800;display:inline-flex;gap:10px;align-items:center}

.text-link span{font-size:24px}

.text-button{background:none;border:0;padding:0;font-weight:900;cursor:pointer}

.eyebrow{font-size:11.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px}

.hero{max-width:var(--max);margin:auto;padding:42px 28px 70px}

.hero-grid{background:var(--ink);border-radius:38px;min-height:650px;padding:72px;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;position:relative;overflow:hidden}

.hero-grid:before{content:"";position:absolute;width:500px;height:500px;background:radial-gradient(circle,var(--accent-2) 0,transparent 70%);right:-180px;top:-240px;opacity:.38}

.hero-grid:after{content:"";position:absolute;width:440px;height:440px;background:radial-gradient(circle,var(--warm) 0,transparent 70%);left:-200px;bottom:-300px;opacity:.2}

.hero-copy,.hero-calculator-card{position:relative;z-index:1}

.hero-copy{color:#fff}

.hero-copy .eyebrow{color:var(--accent)}

.hero h1{margin:0;max-width:760px}

.hero-lead{font-size:20px;line-height:1.65;color:#c7c9c8;margin:28px 0 30px}

.hero-actions{display:flex;gap:26px;align-items:center}

.hero-copy .text-link{color:#fff}

.trust-strip{display:flex;gap:28px;margin-top:46px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14);color:#aeb2b1;font-size:12.8px}

.trust-strip b{color:#fff;font-size:17px;margin-right:5px}

.hero-calculator-card{background:#fff;border-radius:28px;padding:16px;box-shadow:var(--shadow);transform:rotate(1.4deg)}

.hero-card-top{display:flex;justify-content:space-between;align-items:center;padding:7px 7px 16px;font-size:11.5px;font-weight:800}

.live-dot{display:flex;align-items:center;gap:7px;color:var(--ok)}

.live-dot:before{content:"";width:8px;height:8px;background:var(--ok);border-radius:50%;box-shadow:0 0 0 5px rgba(47,139,89,.12)}

.hero-visual{height:320px;border-radius:20px;overflow:hidden;position:relative;background:#17132d}

.hero-visual img{width:100%;height:100%;object-fit:cover}

.hero-visual-badge{position:absolute;left:16px;bottom:16px;background:rgba(12,12,16,.78);backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.2);padding:10px 14px;border-radius:999px;font-size:11.5px;font-weight:900;letter-spacing:.08em}

.hero-mini-summary{padding:18px 8px 6px;display:grid;gap:11px}

.hero-mini-summary div{display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:12.8px}

.hero-mini-summary span{color:var(--muted)}

.hero-mini-summary div:last-child{border-top:1px solid var(--line);padding-top:14px;margin-top:3px}

.hero-mini-summary div:last-child strong{font-size:24px}

.logos{max-width:var(--max);margin:auto;padding:0 28px 50px;display:flex;justify-content:center;align-items:center;gap:24px;text-transform:uppercase;font-weight:900;letter-spacing:.12em;font-size:11.5px;color:#5b605c}

.logos i{width:6px;height:6px;border-radius:50%;background:var(--accent-2)}

.section{max-width:var(--max);margin:auto;padding:110px 28px}

.section-heading{margin-bottom:52px}

.section-heading h2{margin:0 0 20px}

.section-heading>p:last-child{font-size:17px;color:var(--muted)}

.process{padding-top:72px}

.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.process-grid article{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;min-height:0}

.process-grid article span{font-size:11.5px;font-weight:900;color:var(--accent-2)}

.process-grid h3{font-size:24px;margin:12px 0 8px;letter-spacing:-.03em}

.process-grid p{color:var(--muted);margin:0}

.calculator-section{
  width:100%;
  max-width:100%;
  background:var(--ink);
  padding-block:96px 120px;
  padding-inline:clamp(10px,3vw,64px);
}

.calculator-section>.section-heading,
.calculator-section>.calculator-shell{display:block;width:100%;max-width:100%;min-width:0;position:relative}

.section-heading-light{color:#fff}

.section-heading-light>p:last-child{color:#adb1b0}

.calculator-shell{display:block;position:relative;min-width:0}
.calculator-main{display:grid;gap:18px;width:100%;max-width:100%;min-width:0}

.config-card{
  width:100%;
  max-width:100%;
  min-width:0;
  background:#fff;
  border-radius:28px;
  padding:32px;
  box-shadow:0 8px 30px rgba(0,0,0,.08);
  overflow:clip;
}

.config-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-bottom:26px}

.config-head>div:first-child{display:flex;gap:17px}

.step-number{width:38px;height:38px;display:grid;place-items:center;background:var(--ink);color:var(--accent);border-radius:12px;font-weight:900;flex:none}

.config-head p{font-size:11.5px;font-weight:900;letter-spacing:.14em;margin:0 0 4px;color:var(--muted)}

.config-head h3{font-size:24px;letter-spacing:-.03em;margin:0}

.step-value{font-size:11.5px;font-weight:900;background:#f0eee8;border-radius:999px;padding:9px 13px;white-space:nowrap}

.studio-stage{
  height:430px;
  position:relative;
  overflow:hidden;
  perspective:1200px;
  isolation:isolate;
}

.two-column-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}

.control-panel{border:1px solid var(--line);border-radius:20px;padding:22px}

.control-title{display:flex;justify-content:space-between;gap:15px;margin-bottom:22px}

.control-title span{font-weight:800}

.control-title strong{font-size:12.8px;color:var(--accent-2)}

.range{width:100%;accent-color:var(--ink)}

.range-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:11.5px}

.hour-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}

.hour-chips button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 9px;font-size:11.5px;font-weight:800;cursor:pointer}

.hour-chips button.active{background:var(--ink);color:#fff;border-color:var(--ink)}

.episode-wheel{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:9px}

.episode-numbers{display:flex;gap:4px;overflow:hidden;justify-content:center;align-items:center}

.episode-numbers button{border:0;background:transparent;width:34px;height:46px;border-radius:12px;font-weight:900;color:#696C67;cursor:pointer;flex:none}  /* #a0a39f dawal 2,6:1 */

.episode-numbers button.near{color:#555a56}

.episode-numbers button.active{background:var(--ink);color:var(--accent);font-size:20px}

.switch-row{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:11.5px;margin-top:20px}

.switch-row input{position:absolute;opacity:0;pointer-events:none}

.switch{width:40px;height:23px;border-radius:99px;background:#c9cbc7;position:relative;flex:none}

.switch:after{content:"";position:absolute;width:17px;height:17px;background:#fff;border-radius:50%;left:3px;top:3px;box-shadow:0 2px 7px rgba(0,0,0,.25);transition:.2s}

.switch-row input:checked+.switch{background:var(--ink)}

.switch-row input:checked+.switch:after{transform:translateX(17px);background:var(--accent)}

.switch-row small{display:block;color:var(--muted);font-weight:500}

.duration-row,.sla-row{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-top:18px}

.duration-label,.sla-row>span{font-size:12.8px;font-weight:800}

.segmented{display:flex;gap:6px;background:#efede7;padding:5px;border-radius:999px}

.people-panel{max-width:520px}

.people-panel .episode-numbers button{width:44px}

.people-hint{margin:16px 2px 0;font-size:12.8px;line-height:1.5;color:#6a6f76}

.segmented button{border:0;background:transparent;border-radius:999px;padding:10px 16px;font-size:11.5px;font-weight:800;cursor:pointer}

.segmented button.active{background:#fff;box-shadow:0 3px 13px rgba(0,0,0,.09)}

.segmented.compact button{padding:8px 12px}

.capacity-box{display:flex;gap:13px;align-items:center;background:#e8f6ee;border:1px solid #bcdfc9;border-radius:16px;padding:14px 16px;margin-top:20px}

.capacity-box.warning{background:#fff0ed;border-color:#f0c2b9}

.capacity-icon{width:30px;height:30px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-weight:900}

.capacity-box.warning .capacity-icon{background:var(--bad)}

.capacity-box strong,.capacity-box span{display:block}

.capacity-box span{font-size:11.5px;color:var(--muted);margin-top:2px}

.editing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}

.editing-option-wrap{position:relative}
.editing-option{border:1px solid var(--line);background:#fff;border-radius:20px;padding:20px;text-align:left;cursor:pointer;position:relative;width:100%;height:100%;display:flex;flex-direction:column}

.editing-option:hover{border-color:#949994}

.editing-option.active{border:2px solid var(--ink);padding:19px;box-shadow:0 12px 30px rgba(17,20,23,.09)}

.editing-option h4{font-size:20px;margin:14px 0 6px}

.editing-option .price{font-weight:900;font-size:17px}

.editing-option p{font-size:11.5px;color:var(--muted);min-height:54px}

.editing-option ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:6px}

.editing-option li{font-size:11.5px;padding-left:17px;position:relative}

.editing-option li:before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:900}


.editing-example{position:absolute;top:21px;right:20px;z-index:2;display:inline-block;font-size:9px;text-transform:uppercase;letter-spacing:.11em;font-weight:900;color:var(--ink);background:#efede7;padding:6px 8px;border-radius:999px;text-decoration:none;line-height:normal;transition:background .15s,color .15s}

.editing-example:hover{background:#e4e1d7;color:var(--blue)}

.subscription-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}

.subscription-option{border:1px solid var(--line);background:#fff;border-radius:18px;padding:18px;text-align:left;cursor:pointer;min-height:160px;display:flex;flex-direction:column}

.subscription-option.active{border:2px solid var(--ink);padding:17px;background:#f8f7f3}

.subscription-option .discount{font-size:24px;font-weight:950;letter-spacing:-.04em}

.subscription-option h4{font-size:12.8px;margin:7px 0}

.subscription-option p{font-size:11.5px;color:var(--muted);margin:0}

.subscription-option.active .discount{color:var(--accent-2)}

.rule-note{display:flex;gap:12px;background:#f0eee8;padding:15px;border-radius:15px;margin-top:17px}

.rule-note span{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none;font-weight:900}

.rule-note p{margin:0;font-size:11.5px}

.addons-toolbar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px}

.addon-categories{display:flex;gap:6px;overflow:auto;padding-bottom:4px}

.addon-categories button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;font-size:11.5px;font-weight:800;white-space:nowrap;cursor:pointer}

.addon-categories button.active{background:var(--ink);color:#fff;border-color:var(--ink)}

.search-field{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:0 13px;min-width:270px}

.search-field input{border:0;background:transparent;outline:0;width:100%;height:42px;font-size:11.5px}

.addons-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

.addon-card{border:1px solid var(--line);border-radius:16px;padding:15px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}

.addon-card.selected{border-color:var(--accent-2);box-shadow:inset 0 0 0 1px var(--accent-2);background:#f9f7ff}

.addon-card h4{font-size:12.8px;margin:0 0 3px}

.addon-card p{font-size:10px;color:var(--muted);margin:0}

.addon-card .addon-price{font-size:11.5px;font-weight:900;margin-top:6px}

.addon-action{display:flex;align-items:center;gap:5px}

.addon-add{border:1px solid var(--ink);background:#fff;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:900;cursor:pointer}

.addon-add:hover{background:var(--ink);color:#fff}

.qty{display:flex;align-items:center;gap:7px}

/* flex + line-height:1 - bez tego glif +/- siada o ~2 px poniżej środka kółka */
.qty button{width:28px;height:28px;border:1px solid var(--line);background:#fff;border-radius:50%;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;font-size:15.2px}

.qty span{min-width:18px;text-align:center;font-size:11.5px;font-weight:900}

.addons-more{margin:18px auto 0;display:flex}

.optional-card{padding:22px 30px}

.optional-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}

.optional-grid .switch-row{margin:0}

.optional-grid>div:last-child{border-left:1px solid var(--line);padding-left:30px}

.optional-grid p{font-size:11.5px;color:var(--muted);margin:0 0 5px}

.summary-card{
  position:sticky;
  top:76px;
  transition:top .28s ease;
  z-index:40;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0 0 18px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:20px;
  background:#fbfaf7;
  box-shadow:0 16px 44px rgba(0,0,0,.24);
  overflow:hidden;
}

.summary-bar{
  min-height:94px;
  display:grid;
  grid-template-columns:minmax(118px,.7fr) minmax(210px,1.35fr) minmax(190px,.9fr) minmax(175px,.9fr) minmax(170px,.8fr);
  align-items:center;
  gap:0;
}

.summary-bar>div{
  min-width:0;
  padding:15px 18px;
}

.summary-bar>div+div{border-left:1px solid var(--line)}

.summary-status{
  display:flex;
  align-items:center;
  gap:10px;
  background:#edf8f1;
}

.summary-status>span{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:50%;
  background:var(--ok);
  color:#fff;
  font-weight:900;
}

.summary-status strong,
.summary-status small{display:block}

.summary-status strong{font-size:10px}

.summary-status small{margin-top:2px;color:#626862;font-size:9px}

.summary-status.warning{background:#fff0ed}

.summary-status.warning>span{background:var(--bad)}

.summary-primary,
.summary-secondary{
  border-radius:13px;
  cursor:pointer;
}

.summary-primary{
  min-height:52px;
  padding:8px 11px;
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  align-items:center;
  gap:8px;
  border:1px solid #b6d94b;
  background:var(--accent);
  color:var(--ink);
  text-align:left;
}

.summary-primary:hover{filter:brightness(.95)}

.summary-secondary{
  width:46px;
  min-height:52px;
  border:1px solid #c5c7c3;
  background:#fff;
}

.summary-secondary:hover{border-color:var(--ink)}

.summary-secondary .summary-action-icon{
  margin:auto;
  background:#ece9e2;
  color:var(--ink);
  font-size:8px;
}

.hidden{display:none!important}

.packages{padding-bottom:130px}

.package-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}


.package-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:28px 25px 25px;display:flex;flex-direction:column;position:relative}
/* karta zgodna z bieżącą konfiguracją kalkulatora (oznaczAktywnyPakiet w oferta-app.js) */
.package-card.is-active{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}



.package-badge{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);background:var(--accent);color:var(--ink);border:3px solid var(--paper);border-radius:999px;padding:6px 14px;font-size:9px;font-weight:900;letter-spacing:.05em;white-space:nowrap;box-shadow:0 3px 10px rgba(20,22,26,.18);z-index:3}

.package-photo{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:25px 25px 0 0;margin:-28px -25px 18px;position:relative}
.package-photo img{width:100%;height:100%;object-fit:cover;display:block}
.package-photo-tag{position:absolute;left:10px;bottom:10px;font-family:var(--body);font-size:9px;letter-spacing:.06em;text-transform:uppercase;background:rgba(19,21,23,.82);color:#fff;padding:4px 8px;border-radius:999px}
.package-kicker{font-size:10px;font-weight:900;color:var(--accent-2);text-transform:uppercase;letter-spacing:.1em}

.package-card h3{font-size:24px;letter-spacing:-.04em;margin:8px 0 4px}

.package-card .package-desc{font-size:11.5px;color:var(--muted);margin:0}

/* Kreska nad kwotą. Żeby na wszystkich kartach wypadała w tej samej linii,
   opisy są wyrównywane do najdłuższego z nich - robi to wyrownajOpisy() w oferta-app.js. */
.package-price{margin:22px 0 0;padding-top:22px;border-top:1px solid var(--line)}

.package-price strong{font-size:30px;letter-spacing:-.05em;display:block}

.package-price span{font-size:11.5px;color:var(--muted)}
.package-price .package-unit{font-size:15.2px;color:var(--ink);font-weight:800;letter-spacing:-.02em}
.package-scope{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.package-card .package-scope li{font-size:10px;color:var(--muted);padding-left:12px;line-height:1.4}
.package-card .package-scope li:before{content:"\2013";color:var(--accent-2);font-weight:400;font-size:10px;top:0}

.package-card ul{list-style:none;padding:18px 0 4px;margin:0;border-top:1px solid var(--line);display:grid;gap:10px;align-content:start;flex:1}

.package-card li{font-size:11.5px;line-height:1.45;padding-left:20px;position:relative}

.package-card li:before{content:"✓";position:absolute;left:0;top:.05em;color:var(--ok);font-weight:900;font-size:11.5px}

.package-card .button{margin-top:20px;font-size:11.5px}

.compare{background:#dfe8ff;max-width:none;padding-left:max(28px,calc((100vw - var(--max))/2 + 28px));padding-right:max(28px,calc((100vw - var(--max))/2 + 28px))}

.compare-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}

.compare-copy h2{font-size:56px;line-height:1;letter-spacing:-.055em;margin:0 0 20px}

.compare-copy p:not(.eyebrow){color:#505b6b;font-size:17px;margin-bottom:26px}

.included-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.included-grid article{background:#fff;padding:25px;border-radius:20px}

.included-grid span{font-size:10px;font-weight:900;color:var(--accent-2)}

.included-grid h3{font-size:20px;margin:24px 0 5px}

.included-grid p{font-size:11.5px;color:var(--muted);margin:0}

.faq{}

.faq-list{border-top:1px solid var(--line)}

.faq details{border-bottom:1px solid var(--line);padding:0}

.faq summary{list-style:none;cursor:pointer;padding:25px 45px 25px 0;font-size:20px;font-weight:850;position:relative}

.faq summary::-webkit-details-marker{display:none}

.faq summary:after{content:"+";position:absolute;right:5px;font-size:30px;font-weight:500;top:19px}

.faq details[open] summary:after{content:"−"}

.faq details p{color:var(--muted);padding:0 0 27px;margin:0;font-size:15.2px}

.final-cta{max-width:var(--max);margin:30px auto 80px;background:var(--ink);color:#fff;border-radius:34px;padding:55px 60px;display:flex;justify-content:space-between;align-items:center;gap:40px}

.final-cta .eyebrow{color:var(--accent);margin-bottom:6px}

.final-cta h2{font-size:40px;line-height:1.05;letter-spacing:-.05em;margin:0;max-width:760px}

/* Stopka: wygląd przeniesiony do site-chrome.css (wspólny dla całego serwisu). */
.lead-modal{border:0;border-radius:28px;padding:0;width:min(560px,calc(100% - 30px));box-shadow:var(--shadow)}

.lead-modal::backdrop{background:rgba(12,14,16,.68);backdrop-filter:blur(6px)}

.modal-card{padding:35px;position:relative;max-height:min(92vh,92dvh);overflow-y:auto}

.modal-card h2{font-size:40px;letter-spacing:-.05em;line-height:1;margin:0 0 14px}

.modal-card>p:not(.eyebrow){color:var(--muted)}

.modal-close{position:absolute;right:18px;top:18px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:24px;cursor:pointer}

.modal-card label{display:grid;gap:5px;font-size:11.5px;font-weight:800;margin-top:13px}

.modal-card input,.modal-card textarea{border:1px solid var(--line);border-radius:12px;padding:12px 13px;outline:0;background:#faf9f6}

.modal-card input:focus,.modal-card textarea:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(124,92,252,.12)}

.modal-card .consent{display:flex;grid-template-columns:auto 1fr;align-items:center;font-weight:500}

.modal-card .consent input{width:18px;height:18px}

.modal-note{display:block;color:var(--muted);font-size:9px;text-align:center;margin-top:10px}

.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,120px);background:var(--ink);color:#fff;border-radius:999px;padding:12px 18px;font-size:11.5px;font-weight:800;z-index:100;transition:.3s}

.toast.show{transform:translate(-50%,0)}
@media (max-width:1180px) {
  .hero-grid{padding:50px;gap:38px}

  .subscription-grid{grid-template-columns:1fr 1fr}

  .package-grid{grid-template-columns:1fr 1fr;gap:32px 14px}  /* wiekszy odstep miedzy rzedami - plakietka polecanej karty wystaje ponad krawedz */

}
@media (max-width:900px) {
  .hero-grid{grid-template-columns:1fr;padding:45px 30px}

  .hero-copy{padding-top:15px}

  .hero-calculator-card{max-width:620px}

  .process-grid,.compare-grid{grid-template-columns:1fr}

  .calculator-shell{display:block}

  .summary-card{position:relative;top:auto}

  .editing-grid{grid-template-columns:1fr}

  .editing-option p{min-height:0}

  .two-column-controls{grid-template-columns:1fr}

  .package-grid{grid-template-columns:1fr 1fr;gap:32px 14px}  /* wiekszy odstep miedzy rzedami - plakietka polecanej karty wystaje ponad krawedz */

  footer{grid-template-columns:1fr 1fr}}
@media (max-width:640px) {
  .brand small{display:none}

  .hero{padding:18px 12px 45px}

  .hero-grid{padding:42px 22px;border-radius:26px;min-height:auto}

  .hero-lead{font-size:15.2px}

  .hero-actions{align-items:flex-start;flex-direction:column;gap:18px}

  .trust-strip{display:grid;gap:9px}

  .hero-calculator-card{transform:none}

  .hero-visual{height:240px}

  .hero-mini-summary div{align-items:flex-start;flex-direction:column;gap:2px}

  .logos{display:none}

  .section{padding:80px 16px}

  .process-grid,.included-grid{grid-template-columns:1fr}
  .package-grid{grid-template-columns:1fr;gap:32px}

  .calculator-section{padding:80px 12px 115px}

  .config-card{padding:21px;border-radius:22px}

  .config-head{flex-direction:column;padding-bottom:20px}

  .config-head .step-value{align-self:flex-start;margin-left:55px;margin-top:-8px}

  .studio-stage{height:300px}

  .duration-row,.sla-row{align-items:flex-start;flex-direction:column}

  .segmented{width:100%;display:grid;grid-template-columns:repeat(3,1fr);border-radius:17px}

  .segmented button{padding:10px 7px}

  .editing-grid,.subscription-grid,.addons-grid{grid-template-columns:1fr}

  .addons-toolbar{align-items:stretch;flex-direction:column}

  .search-field{min-width:0}

  .optional-grid{grid-template-columns:1fr}

  .optional-grid>div:last-child{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:18px}


  .compare{padding-left:16px;padding-right:16px}

  .compare-copy h2{font-size:40px}

  .final-cta{margin:20px 12px 100px;padding:40px 25px;align-items:flex-start;flex-direction:column;border-radius:26px}

  .final-cta h2{font-size:40px}

  footer{grid-template-columns:1fr;padding:30px 16px 110px}}
` dawał błąd parsera CSS (audyt K-01). */

@media (max-width:1050px){
  .summary-bar{
    grid-template-columns:110px minmax(190px,1.3fr) minmax(170px,.85fr) minmax(155px,.8fr);
  }
  .summary-actions{
    grid-column:1/-1;
    border-left:0!important;
    border-top:1px solid var(--line);
    grid-template-columns:minmax(0,220px) 46px;
    justify-content:end;
    padding:10px 14px!important;
  }
}
@media (max-width:760px) {
  .calculator-section{padding:72px 8px 100px}

  .calculator-section>.section-heading,
  .calculator-section>.calculator-shell{
    width:calc(100vw - 16px);
  }

  .summary-card{top:4px;border-radius:15px}

  .summary-bar{
    min-height:0;
    grid-template-columns:minmax(0,1fr) auto;
  }

  .summary-status{display:none!important}

  .summary-primary,.summary-secondary{min-height:44px}

  .config-card{padding:20px;border-radius:20px}

  .config-head{flex-wrap:wrap}

  .config-head .step-value{margin-left:55px}

  .studio-stage{height:270px}

  .two-column-controls,
  .editing-grid,
  .subscription-grid,
  .addons-grid,
  .optional-grid{grid-template-columns:1fr}

  .addons-toolbar{align-items:stretch;flex-direction:column}

  .search-field{min-width:0;width:100%}

  .duration-row,.sla-row{align-items:stretch;flex-direction:column}

  .segmented{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:16px}

  .segmented button{padding:10px 5px}}
@media print {
  body{background:#fff}}


.calculator-shell,
.calculator-main,
.config-card,
.control-panel,
.editing-option,
.subscription-option,
.addon-card,
.summary-card{min-width:0;max-width:100%}

.config-card *{overflow-wrap:anywhere}

.addon-categories{max-width:100%;overscroll-behavior-inline:contain}

img,svg,video,canvas{max-width:100%}


/* v1.4 - płynna szerokość oparta wyłącznie na marginesie strony */
.calculator-section > .section-heading,
.calculator-section > .calculator-shell{
  display:block;
  width:100%;
  max-width:none;
  min-width:0;
  margin-left:0;
  margin-right:0;
}

.calculator-shell,
.calculator-main,
.config-card{
  width:100%;
  max-width:100%;
  min-width:0;
}


.hero-visual img{width:100%;height:100%;object-fit:cover;object-position:center}
@media (max-width:900px) {
  .calculator-section{padding-inline:clamp(8px,2.5vw,22px)}

  .studio-stage{height:370px}}
@media (max-width:640px) {
  .calculator-section{padding-inline:8px}

  .studio-stage{height:290px}}


/* ===== BRAND OVERRIDE - Storymakers ===== */
h1,h2,h3,.brand strong,.hero-summary strong,.summary-net,.package-price strong,.episode-numbers button.active{font-family:var(--display);font-stretch:110%;letter-spacing:-.01em}

.eyebrow,.prototype-note span,.control-title strong,.package-kicker,.step-number,.studio-card-content>span,.summary-kicker,.included-grid span,.process-grid article span{font-family:var(--body)}

.button-accent{color:#0E1610 !important}




/* --- większe marginesy strony (--gutter w tokens.css) --- */
.site-header{ padding-left:var(--gutter); padding-right:var(--gutter); }

main > section, main > .section, .calculator-section, .hero, .logos, .section, .final-cta{ padding-left:var(--gutter); padding-right:var(--gutter); }

main > *{ max-width:none; }

.calculator-shell,.hero-grid,.process-grid,.section-heading,.packages-grid,.compare-grid,.faq-grid{ max-width:1180px; margin-left:auto; margin-right:auto; }

footer{ padding-left:var(--gutter); padding-right:var(--gutter); }


/* --- STUDIO: kompaktowa siatka kart (mniejsze kafelki) --- */
/* osiem sal: cztery kolumny układają je w dwa równe rzędy, a siostrzane sale
   z tej samej kategorii stoją obok siebie (auto-fit dawał 5+3) */
.studio-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:8px; }
@media(max-width:900px) { .studio-grid{ grid-template-columns:repeat(2,1fr); }}
@media(max-width:480px) { .studio-grid{ grid-template-columns:1fr; }}

.studio-tile{ text-align:left; border:2px solid var(--line); border-radius:14px; background:#fff; padding:0; cursor:pointer; overflow:hidden; display:flex; flex-direction:column; transition:border-color .15s, box-shadow .15s, transform .15s; }

.studio-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }

.studio-tile.selected{ border-color:var(--accent-2); box-shadow:0 0 0 3px rgba(128,88,253,.18); }

.studio-tile-photo{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; }

.studio-tile-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.studio-tile-tag{ position:absolute; left:8px; bottom:8px; font-family:var(--body); font-size:9px; letter-spacing:.06em; text-transform:uppercase; background:rgba(19,21,23,.82); color:#fff; padding:4px 7px; border-radius:999px; }

.studio-tile-check{ position:absolute; right:8px; top:8px; width:22px; height:22px; border-radius:50%; background:var(--accent-2); color:#fff; display:grid; place-items:center; font-size:11.5px; font-weight:800; opacity:0; transform:scale(.6); transition:.15s; }

.studio-tile.selected .studio-tile-check{ opacity:1; transform:scale(1); }

.studio-tile-body{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:2px; }

.studio-tile-name{ font-family:var(--display); font-stretch:106%; font-weight:750; font-size:.95rem; }

.studio-tile-desc{ font-size:.8rem; color:var(--muted); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.studio-tile-price{ font-family:var(--body); font-size:.8rem; color:var(--ok); margin-top:2px; }


/* --- BELKA PODSUMOWANIA: kompaktowa, więcej marginesów --- */
.summary-card{ max-width:1180px; margin:0 auto 26px; }

.summary-bar{ display:grid; grid-template-columns:1.15fr 1.25fr auto; gap:22px; align-items:center;
  background:var(--white); border:1px solid var(--line); border-radius:20px; padding:18px 24px; box-shadow:var(--shadow); }
@media(max-width:900px) { .summary-bar{ grid-template-columns:1fr; gap:16px; } .summary-bar>div+div{ border-left:0; }}

.sb-config .sb-kicker{ font-family:var(--body); font-size:10px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; display:flex; align-items:center; gap:8px; margin-bottom:6px; }

.sb-config .sb-kicker button{ border:none; background:none; color:var(--accent-2); font-family:var(--body); font-size:10px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; text-decoration:underline; }

.sb-line{ font-family:var(--display); font-stretch:108%; font-weight:750; font-size:1.0625rem; margin:0; }

.sb-sub{ font-size:.8rem; color:var(--muted); margin:2px 0 8px; }

.sb-status{ display:inline-flex; align-items:center; gap:8px; font-size:.8rem; padding:5px 10px; border-radius:999px; }

.sb-status.ok{ background:rgba(72,249,131,.14); color:#137a3a; }

.sb-status.warning{ background:rgba(186,59,59,.12); color:#a02b2b; }

.sb-status span{ font-weight:800; }

.sb-money{ display:flex; flex-direction:column; gap:10px; }

.sb-split{ display:flex; flex-wrap:nowrap; align-items:stretch; column-gap:8px; background:var(--paper); border-radius:14px; padding:10px 12px; }

.sb-split [hidden]{ display:none; }
@media(max-width:560px){ .sb-split{ display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; } .sb-split-op{ display:none; } .sb-split .sb-split-item small,.sb-split .sb-split-item span{ white-space:normal; } }

.sb-split-item{ display:flex; flex-direction:column; justify-content:flex-end; flex:1 1 auto; min-width:min-content; }

.sb-split-item b,.sb-split-item span{ white-space:nowrap; }

.sb-split-item small{ font-family:var(--body); font-size:8.5px; letter-spacing:.06em; line-height:1.25; text-transform:uppercase; color:var(--muted); }

.sb-split-item b{ font-family:var(--display); font-stretch:108%; font-size:1.125rem; font-weight:800; line-height:1.05; }

.sb-split-item span{ font-size:.72rem; color:var(--muted); }

.sb-split-op{ font-size:1rem; font-weight:800; color:var(--muted); align-self:center; }
@media(min-width:901px) and (max-width:1100px){ .sb-split{ column-gap:6px; padding:10px 8px; } .sb-split-op{ display:none; } .sb-split-item b{ font-size:1.05rem; } .sb-split-item span{ font-size:.66rem; } }

.sb-total{ display:flex; align-items:baseline; gap:10px; }

.sb-total>span{ font-size:.8rem; color:var(--muted); }

.sb-total strong{ font-family:var(--display); font-stretch:112%; font-size:1.875rem; font-weight:800; }

.sb-total small{ font-family:var(--body); font-size:.8rem; color:var(--muted); }

.sb-actions{ display:flex; gap:10px; align-items:center; }

.summary-primary{ min-height:48px; padding:0 18px; border-radius:999px; border:none; background:var(--accent); color:#0E1610; font-weight:800; cursor:pointer; white-space:nowrap; display:flex; align-items:center; justify-content:center; grid-template-columns:none; text-align:center; }

.summary-primary:hover{ filter:brightness(.95); }

.summary-secondary{ min-height:48px; width:52px; border-radius:999px; border:1px solid var(--line); background:#fff; font-family:var(--body); font-size:11.5px; font-weight:700; cursor:pointer; }
@media(max-width:900px){ .summary-primary{ flex:1; } }


/* poprawka przycisków w belce */
.summary-primary{ white-space:nowrap; }

.sb-actions{ flex-shrink:0; }
@media(min-width:901px) { .summary-bar{ grid-template-columns:1.1fr 1.3fr minmax(150px,auto); }}


/* poprawka layoutu akcji w belce - pełna szerokość, bez nachodzenia */
@media(min-width:901px){ .summary-bar{ grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) 272px; } }

/* kwota razem nad przyciskami - niższa belka */
.sb-actions{ display:flex; flex-direction:column; align-items:stretch; gap:8px; }

.sb-actions .sb-total{ display:grid; justify-items:end; gap:0; }

.sb-actions .sb-total>span{ font-family:var(--body); font-size:8.5px; letter-spacing:.06em; line-height:1.25; text-transform:uppercase; }

.sb-actions .sb-total strong{ line-height:1.05; }

.sb-buttons{ display:flex; gap:10px; justify-content:flex-end; }
@media(max-width:900px){ .sb-actions .sb-total{ justify-items:start; } }

.summary-primary{ flex:0 0 auto; min-width:140px; }

.summary-secondary{ flex:0 0 52px; }


/* logo (wektorowy lockup) - ta sama pozycja co na pozostałych podstronach */
.brand{ line-height:0; gap:0; }

.brand .brand-logo{ height:30px; width:auto; display:block; }
@media(max-width:520px) { .brand .brand-logo{ height:26px; }}


/* belka podsumowania: offset pod header (76px), a gdy menu schowane - wyżej (12px) */
html.hdr-up .summary-card{ top:12px; }


/* separatory w liście dodatków (wybrane u góry) */
.addon-sep{ grid-column:1/-1; font-family:var(--body); font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:10px 2px 2px; }

.addon-sep + .addon-card{ margin-top:0; }

.addons-grid > .addon-sep:not(:first-child){ border-top:1px solid var(--line); margin-top:8px; padding-top:12px; }

.addon-sep:first-child{ color:var(--accent-2); }




/* wszystkie sekcje: pełne tło, jednakowy margines boczny, jednakowy pion */
main > .hero,
main > .logos,
main > .section,
main > .process,
main > .calculator-section{
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

main > .hero{ padding-top:var(--sec-y); padding-bottom:var(--sec-y); max-width:none; }

main > .logos{ padding-top:0; padding-bottom:var(--sec-y); max-width:none; }

main > .section,
main > .process{ padding-top:var(--sec-y); padding-bottom:var(--sec-y); max-width:none; }

main > .calculator-section{ padding-top:var(--sec-y); padding-bottom:var(--sec-y); }


/* treść zawsze w jednej kolumnie 1180, wyśrodkowana */
.hero-grid,
.section-heading,
.process-grid,
.packages-grid,
.package-grid,
.compare-grid,
.compare,
.faq-grid,
.calculator-shell,
.next-steps,
.dlaczego-grid,
.dlaczego-nota,
.logos{ max-width:var(--max); margin-left:auto; margin-right:auto; }


/* sekcja CTA jako wyśrodkowana karta o tej samej szerokości */
.final-cta{ max-width:var(--max); margin:var(--sec-y) auto; }

footer{ padding-left:var(--gutter); padding-right:var(--gutter); }


/* podpowiedź przy liczbie odcinków (0 = bez montażu) */
.episode-hint{ margin:8px 2px 0; font-size:11.5px; color:var(--muted); }

.episode-hint b{ color:var(--accent-2); font-weight:800; }


/* dociągnięcie treści kalkulatora do tej samej kolumny 1180 co reszta sekcji */
main > .calculator-section > .section-heading,
main > .calculator-section > .calculator-shell{
  max-width:var(--max); width:auto; margin-left:auto; margin-right:auto;
}


/* FAQ - dociągnięcie do kolumny 1180 (było rozciągnięte na całą szerokość) */
.faq .section-heading,
.faq .faq-list{ max-width:var(--max); margin-left:auto; margin-right:auto; }



/* Nagłówek: wygląd przeniesiony do site-chrome.css (wspólny dla całego serwisu). */


.hero{ background:var(--ink); position:relative; overflow:hidden; }

.hero::before{ content:""; position:absolute; width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle,var(--accent-2) 0,transparent 70%); right:-180px; top:-280px; opacity:.30; pointer-events:none; z-index:0; }

.hero::after{ content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,var(--warm) 0,transparent 70%); left:-220px; bottom:-280px; opacity:.16; pointer-events:none; z-index:0; }

.hero-grid{ background:none; border-radius:0; padding:0; min-height:auto; position:relative; z-index:1; }

.hero-grid::before, .hero-grid::after{ content:none; display:none; }
@media(max-width:900px) { .hero-grid{ gap:34px; }}



/* fonty w tokens.css */
body{ font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }

h1,h2,h3{ font-family:var(--display); font-stretch:112%; line-height:1.12; letter-spacing:-.01em; }

/* skala nagłówków = jak strona główna / podstrony */
.hero h1{ font-size:clamp(1.875rem,5.2vw,3.5rem); line-height:1.12; letter-spacing:-.01em; }

.section-heading h2{ font-size:clamp(1.5rem,3.4vw,2.5rem); line-height:1.14; letter-spacing:-.01em; }

.compare-copy h2{ font-size:clamp(1.5rem,3.4vw,2.5rem); line-height:1.14; letter-spacing:-.01em; }

.final-cta h2{ font-size:clamp(1.5rem,3.2vw,2.5rem); line-height:1.16; letter-spacing:-.01em; }

.modal-card h2{ font-size:clamp(1.5rem,3vw,1.875rem); line-height:1.16; letter-spacing:-.01em; }

/* nagłówki komponentów: ujednolicony tracking (rozmiar zostaje kontekstowy) */
.config-head h3,.process-grid h3,.package-card h3,.compare-copy h3{ letter-spacing:-.01em; }



main > .hero,
main > .logos,
main > .section,
main > .process,
main > .calculator-section,
main > .final-cta{ padding-left:0; padding-right:0; }


.hero-grid,
.section-heading,
.process-grid,
.calculator-shell,
.packages-grid,
.package-grid,
.compare-grid,
.faq-list,
.next-steps,
.dlaczego-grid,
.dlaczego-nota{
  max-width:1180px; margin-left:auto; margin-right:auto;
  padding-left:24px; padding-right:24px; box-sizing:border-box;
}

/* karta CTA: krawędzie w tej samej kolumnie treści (1180 - 2×24) */
.final-cta{ max-width:1132px; margin-left:auto; margin-right:auto; }

/* pełnoszeroki pasek „compare": treść wyrównana do 24px jak .wrap */
.compare{ padding-left:max(24px,calc((100vw - 1180px)/2 + 24px)); padding-right:max(24px,calc((100vw - 1180px)/2 + 24px)); }


/* HERO - górny odstęp taki sam jak page-hero na pozostałych stronach */
main > .hero{ padding-top:4rem; padding-bottom:4rem; }



.eyebrow{ font-weight:400; }

main > .final-cta{ padding:clamp(34px,4.5vw,56px); }



main > .logos{ padding-top:2.5rem; padding-bottom:2.5rem; }  /* symetrycznie - tekst w pionowym srodku jasnego paska */
@media(min-width:641px) { main > .process{ padding-top:2.5rem; }}



.hero-copy .crumbs{font-family:var(--body);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#9BA0AA;margin:0 0 14px}

.hero-copy .crumbs a{color:#9BA0AA;text-decoration:none}

.hero-copy .crumbs a:hover{color:#fff}



.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.mode-tile{text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:16px;padding:18px 20px;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:border-color .15s,box-shadow .15s,background .15s}

.mode-tile:hover{border-color:var(--ink)}

.mode-tile.active{border-color:var(--accent);background:#f3fef7;box-shadow:0 0 0 3px rgba(72,249,131,.25)}

.mode-tile-title{font-weight:800;font-size:1.0625rem;color:var(--ink)}

.mode-tile-desc{font-size:.8rem;color:var(--muted);line-height:1.45}
@media(max-width:640px) { .mode-grid{grid-template-columns:1fr}}


/* w trybie „wynajem solo" wygaszamy liczbę odcinków, długość i postprodukcję - jednolity poziom wyszarzenia */
.is-disabled{opacity:.5;pointer-events:none;position:relative;filter:grayscale(.4)}
/* nieaktywne bloki (tryb „wynajem solo") lapia klik jako calosc - klik przenosi do wyboru trybu (oferta-app.js) */
.config-card.is-disabled,.control-panel.is-disabled,.duration-row.is-disabled{pointer-events:auto;cursor:pointer;transition:opacity .15s}
.config-card.is-disabled > *,.control-panel.is-disabled > *,.duration-row.is-disabled > *{pointer-events:none}
.config-card.is-disabled:hover,.control-panel.is-disabled:hover,.duration-row.is-disabled:hover{opacity:.66}
.config-card.is-disabled:focus-visible,.control-panel.is-disabled:focus-visible,.duration-row.is-disabled:focus-visible{outline:3px solid var(--rec);outline-offset:3px;opacity:.7}
.mode-tile.is-hint{border-color:var(--rec);animation:mode-hint 1.1s ease 2}
@keyframes mode-hint{0%,100%{box-shadow:0 0 0 0 rgba(5,134,254,0)}50%{box-shadow:0 0 0 7px rgba(5,134,254,.45)}}
@media(prefers-reduced-motion:reduce){.mode-tile.is-hint{animation:none;box-shadow:0 0 0 4px rgba(5,134,254,.45)}}

.control-panel.is-disabled::after,.config-card.is-disabled::after{content:"Nieaktywne w trybie „wynajem solo” · kliknij, by zmienić tryb";position:absolute;top:12px;right:14px;font-family:var(--body);font-size:10px;letter-spacing:.03em;color:var(--muted);background:#f2efe8;border:1px solid var(--line);border-radius:999px;padding:4px 10px;z-index:1}

/* schowaj etykietę „−8% dzięki serii", żeby plakietka „Nieaktywne…" nie nachodziła na tekst (jak w module postprodukcji) */
.control-panel.is-disabled .control-title strong{visibility:hidden}

.duration-row.is-disabled{border-radius:14px}


/* popup "zobacz przyklad" */
button.editing-example{border:0;cursor:pointer;font-family:inherit}

.ex-overlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.72);opacity:0;pointer-events:none;transition:opacity .2s ease}

.ex-overlay.is-open{opacity:1;pointer-events:auto}

.ex-box{position:relative;width:min(960px,100%)}

.ex-frame{aspect-ratio:16/9;background:#000;border-radius:18px;overflow:hidden}

.ex-frame iframe{width:100%;height:100%;border:0;display:block}

.ex-close{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;font-size:20px;line-height:1;cursor:pointer}

.ex-close:hover{background:#fff;color:#111}
/* informacja o przeliczeniu dodatku na godziny / odcinki */
.addon-mult{margin-top:3px;font-size:11.5px;color:#0f5fb8;font-family:var(--body)}
.addon-mult strong{color:var(--ink);font-weight:700}

/* krok 3 - dwa pytania o osoby obok siebie */
.people-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.people-grid{grid-template-columns:1fr}}
.people-q{margin:6px 0 12px;font-size:12.8px;line-height:1.45;color:#6d7076}
.guests-wheel{justify-content:space-between}
.guests-value{flex:1;text-align:center;font-family:var(--display);font-stretch:110%;font-weight:800;font-size:30px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.guests-hint{display:block;margin-top:10px;font-size:11.5px;color:#6d7076}
.guests-hint.is-extra{color:#0f5fb8;font-weight:600}

.dlaczego-grid article h3{font-size:20px;letter-spacing:-.03em;margin:0 0 8px;line-height:1.2}
.dlaczego-grid article p{font-size:12.8px;line-height:1.55;color:var(--muted);margin:0}
.dlaczego-nota{font-size:12.8px;line-height:1.55;color:var(--muted);margin:18px auto 0;max-width:var(--max)}
.dlaczego-nota strong{color:var(--ink)}

.next-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.next-steps article{background:#fff;border:1px solid var(--line);border-radius:26px;padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.next-steps h3{font-size:20px;letter-spacing:-.03em;margin:0}
.next-steps p{font-size:12.8px;line-height:1.5;color:var(--muted);margin:0;flex:1}
.next-steps .button{align-self:flex-start;font-size:11.5px}

/* Cel dotykowy przycisku "wyczysc" (68x18 px) poszerzony nakladka do ~34 px wysokosci */
.sb-kicker button{position:relative}
.sb-kicker button::after{content:"";position:absolute;inset:-8px}

/* Sekcja "Trzy poziomy montażu": trzy karty w siatce pakietów (czterokolumnowej)
   zajmowały 3/4 szerokości i zostawiały pustą kolumnę. Ten wariant rozkłada je
   równo na pełną szerokość kolumny treści. */
.package-grid.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.package-grid.grid-3{grid-template-columns:1fr;gap:32px}}


/* --- Rytm modulow (parytet ze styles.css): sasiadujace sekcje o tym samym,
   jasnym tle nie dubluja pionowego odstepu (2 x --sec-y robilo ~220 px
   pustki) - druga z pary traci padding-top, zostaje pojedynczy --sec-y.
   .compare (niebieskie tlo) zachowuje pelne przejscie z obu stron;
   flow-root pilnuje, zeby margines pierwszego dziecka nie wyplywal. --- */
main > .section:not(.compare) + .section:not(.compare){ padding-top:0; display:flow-root; }

/* Wyszukiwarka dodatkow: widoczny fokus z klawiatury (input ma outline:0) */
.search-field:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,22,26,.12)}

/* suwak dlugosci odcinka */
.duration-slider{flex:1;width:100%;max-width:440px;min-width:0}
.duration-slider .range-labels{align-items:center;margin-top:6px}
.duration-slider .duration-value{font-size:12.8px;font-weight:800;color:var(--ink)}
@media (max-width:760px){.duration-slider{max-width:none}}
/* tryb bez montazu: informacja zamiast oceny planu */
.sb-status.info{ background:#efede7; color:var(--ink); }
.capacity-box.info{background:#f0eee8;border-color:#e2dfd7}
.capacity-box.info .capacity-icon{background:var(--ink)}
/* nota o rabacie za abonament pod suma */
.sb-total{flex-wrap:wrap}
/* blad wysylki wyceny: dane zostaja w oknie */
.modal-error{margin-top:14px;padding:14px 16px;border-radius:14px;background:#fff0ed;border:1px solid #f0c2b9}
.modal-error p{margin:0 0 10px;font-size:12.5px;font-weight:700;color:#8a2a1c}
.modal-error-actions{display:flex;flex-wrap:wrap;gap:8px}
.modal-error-actions .button{min-height:40px;padding:0 14px;font-size:12px}