/* =========================================================
   KROSNO GLASS S.A. — Ankieta oczekiwań partnera hurtowego
   Pure HTML/CSS/JS — black & white, premium feel
   ========================================================= */

/* ---------- design tokens ---------- */
:root{
  --ink:          #0a0a0a;
  --ink-2:        #1a1a1a;
  --ink-3:        #2a2a2a;
  --paper:        #ffffff;
  --paper-2:      #fafafa;
  --paper-3:      #f3f3f3;
  --rule:         #e6e6e6;
  --rule-2:       #d4d4d4;
  --muted:        #6b6b6b;
  --muted-2:      #8a8a8a;
  --accent:       #0a0a0a;      /* keep mono */
  --danger:       #b00020;
  --success:      #1a7e3c;

  --shadow-1:     0 1px 0 rgba(10,10,10,.04), 0 1px 2px rgba(10,10,10,.06);
  --shadow-2:     0 10px 30px -12px rgba(10,10,10,.20);
  --shadow-3:     0 20px 60px -20px rgba(10,10,10,.30);

  --radius-s:     2px;
  --radius:       4px;
  --radius-l:     8px;

  --serif:        'Cormorant Garamond', 'Times New Roman', serif;
  --sans:         'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --transition:   220ms cubic-bezier(.4,0,.2,1);
  --max-w:        1240px;
}

/* ---------- reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none !important }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100% }
button{ font:inherit; cursor:pointer }
a{ color:inherit }
::selection{ background:var(--ink); color:var(--paper) }

.wrap{ width:100%; max-width:var(--max-w); margin:0 auto; padding:0 28px }

.skip-link{
  position:absolute; left:-9999px; top:auto;
  background:var(--ink); color:var(--paper);
  padding:10px 16px; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  z-index:9999;
}
.skip-link:focus{ left:8px; top:8px }

/* ---------- site header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  backdrop-filter:saturate(180%) blur(8px);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  min-height:72px;
}
.brand{
  display:inline-flex; align-items:baseline; gap:10px;
  text-decoration:none; color:var(--ink);
}
.brand-mark{
  font-family:var(--sans); font-weight:700;
  letter-spacing:.22em; font-size:18px;
  color:var(--ink);
}
.brand-sub{
  font-family:var(--sans); font-weight:500;
  letter-spacing:.18em; font-size:11px; color:var(--muted);
  text-transform:uppercase;
  transform:translateY(-1px);
}
.header-meta{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
}

/* ---------- screens ---------- */
.screen{ display:none; animation:fadeIn .45s ease both }
.screen.is-active{ display:block }

@keyframes fadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* ---------- intro screen ---------- */
.intro-screen{ padding:64px 0 96px }
.intro-grid{
  max-width:var(--max-w); margin:0 auto; padding:0 28px;
  display:grid; grid-template-columns:1.4fr 1fr; gap:80px;
  align-items:start;
}
.eyebrow{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); margin-bottom:32px;
  display:inline-flex; align-items:center;
}
.eyebrow::before{
  content:""; width:32px; height:1px; background:var(--ink);
  display:inline-block; margin-right:14px;
}
.intro-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(40px, 6vw, 76px);
  line-height:1.04;
  letter-spacing:-0.01em;
  margin:0 0 28px;
  color:var(--ink);
}
.intro-title em{ font-style:italic; font-weight:500 }
.intro-lead{
  font-size:18px; line-height:1.6; color:var(--ink-3);
  max-width:560px; margin:0 0 40px;
}
.intro-meta{
  list-style:none; padding:0; margin:0 0 48px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.intro-meta li{
  display:flex; gap:14px; align-items:baseline;
  padding:24px 0;
  border-right:1px solid var(--rule);
  padding-right:24px;
}
.intro-meta li:nth-child(2){ padding-left:24px }
.intro-meta li:last-child{ border-right:0; padding-left:24px }
.im-num{
  font-family:var(--serif); font-weight:500; font-size:42px;
  line-height:1; color:var(--ink);
}
.im-lbl{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); line-height:1.4;
}
.intro-note{
  margin-top:24px; font-size:13px; color:var(--muted);
}
.intro-note a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink) }

.intro-right{
  position:sticky; top:104px;
}
.intro-card{
  background:var(--ink); color:var(--paper);
  padding:40px;
  border-radius:var(--radius);
  position:relative;
  overflow:hidden;
}
.ic-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:28px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.ic-eyebrow{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.65);
  font-weight:500;
}
.ic-count{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:28px; line-height:1; color:var(--paper);
  letter-spacing:0;
}
.ic-sections{ display:grid; gap:0; position:relative }
.ic-sections > div{
  display:grid; grid-template-columns:32px 1fr; gap:18px;
  font-size:14px; padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  align-items:center;
  color:rgba(255,255,255,.92);
}
.ic-sections > div:last-child{ border-bottom:0 }
.ic-sections span{
  font-family:var(--sans);
  font-weight:700; font-size:11px;
  color:var(--paper);
  letter-spacing:.16em;
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
}
.ic-sections b{ font-weight:500; letter-spacing:.01em }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  padding:14px 24px;
  font-size:13px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:0;
  transition:all var(--transition);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  user-select:none;
}
.btn::before{
  content:""; position:absolute; inset:0;
  background:var(--ink); transform:scaleX(0); transform-origin:right;
  transition:transform var(--transition);
  z-index:-1;
}
.btn:hover::before{ transform:scaleX(1); transform-origin:left }
.btn:hover{ color:var(--paper) }
.btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px }

.btn-primary{
  background:var(--ink); color:var(--paper);
}
.btn-primary::before{ background:var(--paper); }
.btn-primary:hover{ color:var(--ink) }
.btn-primary:focus-visible{ outline-color:var(--ink) }

.btn-lg{ padding:18px 32px; font-size:14px }

.btn-ghost{
  border-color:var(--rule-2);
  color:var(--ink);
}
.btn-ghost::before{ background:var(--ink) }
.btn:disabled, .btn[aria-disabled="true"]{
  opacity:.45; cursor:not-allowed; pointer-events:none;
}

/* ---------- form screen ---------- */
.form-screen{
  padding:32px 0 80px;
}

/* progress */
.progress-wrap{
  max-width:var(--max-w); margin:0 auto 36px; padding:0 28px;
  position:sticky; top:72px; z-index:40;
  background:var(--paper);
  padding-top:20px; padding-bottom:20px;
  border-bottom:1px solid var(--rule);
}
.progress-meta{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:12px;
}
.pm-step strong{ color:var(--ink); font-weight:600 }
.pm-pct{ font-family:var(--serif); font-style:italic; font-size:16px; letter-spacing:0; text-transform:none; color:var(--ink) }
.progress-track{
  height:2px; background:var(--rule); position:relative; overflow:hidden;
}
.progress-bar{
  position:absolute; left:0; top:0; bottom:0;
  width:0; background:var(--ink);
  transition:width 500ms cubic-bezier(.4,0,.2,1);
}
.progress-steps{
  list-style:none; padding:0; margin:18px 0 0;
  display:grid; grid-template-columns:repeat(6, 1fr); gap:4px;
}
.progress-steps li{
  display:flex; align-items:center; gap:10px;
  padding:8px 4px;
  border-top:2px solid var(--rule);
  font-size:12px;
  color:var(--muted);
  cursor:default;
  transition:color var(--transition), border-color var(--transition);
}
.progress-steps li.is-clickable{ cursor:pointer }
.progress-steps li.is-clickable:hover{ color:var(--ink) }
.progress-steps li.is-done{ color:var(--ink); border-top-color:var(--ink) }
.progress-steps li.is-current{ color:var(--ink); border-top-color:var(--ink) }
.progress-steps li.is-current .step-num{ background:var(--ink); color:var(--paper) }
.step-num{
  width:24px; height:24px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid currentColor;
  font-weight:700; font-size:12px;
  letter-spacing:0;
  transition:background var(--transition), color var(--transition);
}
.progress-steps li.is-done .step-num{ background:var(--ink); color:var(--paper) }
.step-label{ font-weight:500; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* form layout */
#ankietaForm{ max-width:var(--max-w); margin:0 auto; padding:0 28px }
.step{
  display:none;
  border:0; padding:0; margin:0;
  animation:fadeIn .45s ease both;
}
.step.is-active{ display:block }

.step-legend{
  display:flex; align-items:baseline; gap:20px;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(28px, 4vw, 44px);
  line-height:1.1;
  margin:24px 0 8px;
  letter-spacing:-.01em;
  padding:0;
}
.step-legend em{ font-style:italic; font-weight:500; color:var(--muted) }
.sl-letter{
  font-style:italic;
  color:var(--muted);
  font-size:.6em;
  min-width:1.2em;
}
.sl-title{ color:var(--ink) }
.step-intro{
  font-size:15px; color:var(--muted); margin:0 0 36px;
  max-width:600px;
  padding-left:52px;
}

/* field */
.field{ margin-bottom:32px; position:relative }
.field label,
.field .q-label{
  display:block;
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--ink);
  margin-bottom:10px;
}
.field .q-label{
  font-size:15px;
  font-weight:600;
  letter-spacing:0;
  margin-bottom:6px;
}
.q-num{
  display:inline-block;
  font-weight:700;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--muted);
  margin-right:10px;
  vertical-align:1px;
}
.q-hint{ font-weight:400; color:var(--muted); font-size:.9em }
.q-sub{
  font-size:13px; color:var(--muted);
  margin:0 0 16px;
}
.q-sub strong{ color:var(--ink); font-weight:600 }
.field-required > label::after,
.field-required > .q-label::after{
  content:"*"; color:var(--ink); margin-left:4px;
  font-family:var(--serif);
}
.field-hint{
  font-size:12px; color:var(--muted); margin-top:6px;
  letter-spacing:.02em;
}
.field-error{
  display:none;
  font-size:12px; color:var(--danger); margin-top:8px;
  letter-spacing:.02em;
}
.field.has-error .field-error{ display:block }
.field.has-error input:not([type=checkbox]):not([type=radio]),
.field.has-error select,
.field.has-error textarea{
  border-color:var(--danger);
}
.field.has-error .radio-card,
.field.has-error .check-card{
  border-color:var(--danger);
}

.grid-2{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  margin-bottom:0;
}
.grid-2 > .field{ margin-bottom:32px }

/* inputs */
input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=number],
input[type=password],
select,
textarea{
  width:100%;
  font:inherit;
  font-size:15px;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--rule-2);
  padding:10px 0 12px;
  border-radius:0;
  outline:none;
  transition:border-color var(--transition);
  appearance:none;
  -webkit-appearance:none;
}
textarea{
  resize:vertical; min-height:120px;
  padding:14px 16px;
  border:1px solid var(--rule-2);
  line-height:1.6;
}
input:hover,
select:hover,
textarea:hover{ border-color:var(--ink-3) }
input:focus,
select:focus,
textarea:focus{
  border-color:var(--ink);
  outline:none;
}
textarea:focus{ box-shadow:inset 0 -2px 0 var(--ink); border-color:var(--ink) }
input::placeholder,
textarea::placeholder{ color:var(--muted-2); opacity:1 }

select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%230a0a0a' stroke-width='1.4' fill='none' stroke-linecap='square'/></svg>");
  background-repeat:no-repeat;
  background-position:right 0 center;
  padding-right:24px;
  cursor:pointer;
}

/* hide number spinners */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
input[type=number]{ -moz-appearance:textfield }

.input-suffix{
  display:flex; align-items:baseline; gap:10px;
  border-bottom:1px solid var(--rule-2);
  transition:border-color var(--transition);
}
.input-suffix:hover{ border-color:var(--ink-3) }
.input-suffix:focus-within{ border-color:var(--ink) }
.input-suffix input{ border:0; padding:10px 0 12px; flex:1; min-width:0 }
.input-suffix .suffix{
  font-size:12px; color:var(--muted);
  letter-spacing:.06em;
  white-space:nowrap;
  text-transform:uppercase;
}

/* ---------- radio cards ---------- */
.radio-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:10px;
}
.radio-grid-3{ grid-template-columns:repeat(3, 1fr) }
.radio-grid-4{ grid-template-columns:repeat(4, 1fr) }
.radio-grid-tight{ grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:8px }
.radio-grid-tier{ grid-template-columns:repeat(4, 1fr); gap:10px }

.radio-card,
.check-card{
  position:relative;
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  border:1px solid var(--rule-2);
  background:var(--paper);
  cursor:pointer;
  transition:border-color var(--transition), background var(--transition), transform var(--transition);
  font-size:14px;
  line-height:1.45;
  user-select:none;
}
.radio-card:hover,
.check-card:hover{
  border-color:var(--ink);
}
.radio-card input,
.check-card input{
  position:absolute; opacity:0; pointer-events:none;
}
.rc-box,
.cc-box{
  flex:0 0 auto;
  width:18px; height:18px;
  border:1.5px solid var(--ink-3);
  background:var(--paper);
  position:relative;
  transition:all var(--transition);
}
.rc-box{ border-radius:50% }
.cc-box{ border-radius:2px }

.rc-box::after{
  content:""; position:absolute;
  inset:3px;
  background:var(--ink);
  border-radius:50%;
  transform:scale(0);
  transition:transform var(--transition);
}
.cc-box::after{
  content:""; position:absolute;
  left:50%; top:48%;
  width:9px; height:5px;
  border-left:1.8px solid var(--paper);
  border-bottom:1.8px solid var(--paper);
  transform:translate(-50%, -50%) rotate(-45deg) scale(0);
  transform-origin:center;
  transition:transform var(--transition);
}

.radio-card input:checked + .rc-box{ border-color:var(--ink) }
.radio-card input:checked + .rc-box::after{ transform:scale(1) }
.check-card input:checked + .cc-box{ background:var(--ink); border-color:var(--ink) }
.check-card input:checked + .cc-box::after{ transform:translate(-50%, -50%) rotate(-45deg) scale(1) }

.radio-card input:checked ~ *,
.check-card input:checked ~ *{ }
.radio-card:has(input:checked),
.check-card:has(input:checked){
  border-color:var(--ink);
  background:var(--paper-2);
}
.radio-card input:focus-visible + .rc-box,
.check-card input:focus-visible + .cc-box{
  outline:2px solid var(--ink); outline-offset:3px;
}

.rc-text,
.cc-text{ flex:1; display:flex; flex-direction:column; gap:2px }
.rc-text strong,
.cc-text strong{ font-weight:600 }
.rc-text em{
  font-style:normal; font-size:11px; color:var(--muted);
  letter-spacing:.04em; text-transform:uppercase;
}

/* check/radio with inline input */
.radio-card-with-input,
.check-card-with-input{
  align-items:center;
}
.radio-card-with-input .inline-input,
.check-card-with-input .inline-input{
  flex:1; min-width:120px; max-width:none;
  margin-left:6px;
}
.inline-input{
  font:inherit; font-size:14px;
  border:0;
  border-bottom:1px solid var(--rule-2);
  background:transparent;
  padding:4px 0 6px;
  outline:none;
}
.inline-input:focus{ border-color:var(--ink) }
.inline-input:disabled{ opacity:.5; cursor:not-allowed }
.inline-input-wide{
  flex:2;
  font:inherit; font-size:14px;
  border:0;
  border-bottom:1px solid var(--rule-2);
  background:transparent;
  padding:6px 0;
  outline:none;
  width:100%;
}
.inline-input-wide:focus{ border-color:var(--ink) }

/* check list (1-col) */
.check-list{
  display:grid; gap:10px;
}

/* tier styling */
.tier{ padding:18px }
.tier .rc-text strong{
  font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:4px;
}
.tier .rc-text em{
  font-style:normal; font-size:11px; color:var(--muted);
  letter-spacing:.06em; text-transform:none;
}

/* ---------- numbered rows (B3, B4, D3) ---------- */
.rows-numbered{
  display:flex; flex-direction:column; gap:8px;
}
.row-num{
  display:grid; grid-template-columns:32px 1fr; gap:16px;
  align-items:center;
  padding:6px 0;
}
.row-num-with-vol{
  grid-template-columns:32px 1.4fr 1fr;
}
.row-num-with-reason{
  grid-template-columns:32px 1.4fr 1fr;
}
.row-num .rn-idx{
  font-family:var(--sans);
  font-weight:600;
  color:var(--muted);
  font-size:13px;
  text-align:center;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
  line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  border:1px solid var(--rule);
  border-radius:50%;
  background:var(--paper-2);
}
.row-num .rn-volume,
.row-num .rn-reason{
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--rule-2);
  padding:0;
  transition:border-color var(--transition);
}
.row-num .rn-volume:hover,
.row-num .rn-reason:hover{ border-color:var(--ink-3) }
.row-num .rn-volume:focus-within,
.row-num .rn-reason:focus-within{ border-color:var(--ink) }
.row-num .rn-volume input,
.row-num .rn-reason input{ border:0; padding:10px 0 12px; flex:1; min-width:0 }
.row-num .rn-volume .suffix,
.row-num .rn-reason .pre{
  font-size:11px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap;
  font-weight:500;
}

/* ---------- percent list (C3) ---------- */
.pct-list{
  display:flex; flex-direction:column; gap:14px;
  padding:24px;
  background:var(--paper-2);
  border:1px solid var(--rule);
}
.pct-row{
  display:grid; grid-template-columns:1fr 130px; gap:18px;
  align-items:center;
}
.pct-row label{
  margin:0; font-size:14px; font-weight:400; letter-spacing:0;
  color:var(--ink);
}
.pct-input{
  position:relative;
  display:flex; align-items:center; gap:6px;
  border-bottom:1px solid var(--rule-2);
  background:var(--paper);
  padding:4px 10px;
}
.pct-input:focus-within{ border-color:var(--ink) }
.pct-input input{
  border:0; padding:8px 0;
  text-align:right;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.pct-input span{
  font-size:13px; color:var(--muted);
  font-weight:600;
}
.pct-row-export{ grid-template-columns:1fr 1fr; gap:18px }
.pct-export{
  display:grid; grid-template-columns:130px 1fr; gap:14px; align-items:center;
}

.pct-summary{
  display:flex; align-items:baseline; gap:8px; margin-top:18px;
  padding:14px 24px;
  border-top:2px solid var(--ink);
  background:var(--paper);
  font-size:13px;
  letter-spacing:.04em;
}
.pct-total{
  font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:28px; line-height:1;
  margin:0 2px 0 4px;
  font-variant-numeric:tabular-nums;
  transition:color var(--transition);
}
.pct-summary.is-valid .pct-total{ color:var(--success) }
.pct-summary.is-invalid .pct-total{ color:var(--danger) }
.pct-hint{
  margin-left:auto;
  font-size:12px; color:var(--muted);
}
.pct-hint strong{ color:var(--ink); font-weight:600 }

/* ---------- rating 1-5 ---------- */
.rating-list{
  display:flex; flex-direction:column;
  border:1px solid var(--rule);
  background:var(--paper-2);
}
.rating-row{
  display:grid; grid-template-columns:1fr auto; gap:24px;
  align-items:center;
  padding:14px 20px;
  border-bottom:1px solid var(--rule);
  transition:background var(--transition);
}
.rating-row:last-child{ border-bottom:0 }
.rating-row:hover{ background:var(--paper) }
.rating-row .rt-label{
  font-size:14px; color:var(--ink);
}
.rating-row .rt-label em{
  display:block; font-size:11px; color:var(--muted);
  font-style:normal; letter-spacing:.06em; text-transform:uppercase;
  margin-top:2px;
}
.rt-scale{
  display:flex; gap:4px;
  user-select:none;
}
.rt-pill{
  position:relative;
  width:36px; height:36px;
  border:1px solid var(--rule-2);
  background:var(--paper);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:500;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  transition:all var(--transition);
}
.rt-pill input{ position:absolute; opacity:0; pointer-events:none }
.rt-pill:hover{ border-color:var(--ink); transform:translateY(-1px) }
.rt-pill.is-on{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.rt-pill.is-up{ background:var(--ink-2); color:var(--paper); border-color:var(--ink-2) }

/* ---------- consent ---------- */
.check-card-consent{
  align-items:flex-start;
  padding:18px;
  background:var(--paper-2);
  border-color:var(--rule);
}
.check-card-consent .cc-text{
  font-size:13px; color:var(--ink-3); line-height:1.55;
}

/* ---------- form nav ---------- */
.form-nav{
  max-width:var(--max-w); margin:48px auto 0; padding:32px 28px 0;
  border-top:1px solid var(--rule);
  display:flex; align-items:center; gap:12px;
}
.form-nav-spacer{ flex:1 }

/* ---------- thanks screen ---------- */
.thanks-screen{
  padding:120px 28px 120px;
  text-align:center;
}
.thanks-wrap{
  max-width:560px; margin:0 auto;
}
.thanks-mark{
  display:flex; justify-content:center; margin-bottom:32px;
  color:var(--ink);
  animation:thanksIn .8s cubic-bezier(.4,0,.2,1) both;
}
@keyframes thanksIn{
  from{ opacity:0; transform:scale(.6) rotate(-12deg) }
  to{ opacity:1; transform:none }
}
.thanks-title{
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:clamp(48px, 7vw, 84px);
  line-height:1; margin:0 0 24px;
  color:var(--ink);
}
.thanks-lead{
  font-size:17px; line-height:1.65;
  color:var(--ink-3); margin:0 0 32px;
}
.thanks-id{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:32px;
}
.thanks-id strong{
  color:var(--ink); font-family:'JetBrains Mono', ui-monospace, monospace;
  letter-spacing:0;
}

/* ---------- toast & overlay ---------- */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--ink); color:var(--paper);
  padding:14px 22px; font-size:13px; letter-spacing:.04em;
  border-radius:var(--radius);
  z-index:9000;
  box-shadow:var(--shadow-3);
  max-width:90vw;
  animation:toastIn .35s ease;
}
.toast.toast-error{ background:var(--danger) }
@keyframes toastIn{ from{opacity:0; transform:translate(-50%, 12px)} to{opacity:1; transform:translateX(-50%)} }

.overlay{
  position:fixed; inset:0; z-index:9500;
  background:rgba(255,255,255,.94);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px;
  backdrop-filter:blur(4px);
}
.spinner{
  width:48px; height:48px;
  border:2px solid var(--rule);
  border-top-color:var(--ink);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.overlay-text{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--rule);
  padding:32px 0;
  font-size:12px;
  color:var(--muted);
}
.site-footer .wrap{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap }
.site-footer a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule-2) }
.site-footer a:hover{ border-color:var(--ink) }
.site-footer strong{ color:var(--ink); font-weight:600 }

/* ---------- honeypot ---------- */
.hp-wrap{
  position:absolute; left:-9999px; top:-9999px;
  width:1px; height:1px; overflow:hidden;
}

/* ---------- responsive ---------- */
@media (max-width: 960px){
  .intro-grid{ grid-template-columns:1fr; gap:48px }
  .intro-right{ position:static }
  .grid-2{ grid-template-columns:1fr; gap:0 }
  .grid-2 > .field{ margin-bottom:28px }
  .radio-grid,
  .radio-grid-3,
  .radio-grid-4{ grid-template-columns:repeat(2, 1fr) }
  .progress-steps{ grid-template-columns:repeat(6, auto); overflow-x:auto; padding-bottom:6px }
  .progress-steps .step-label{ display:none }
  .progress-steps li{ padding:8px 6px; justify-content:center }
}

@media (max-width: 700px){
  .wrap{ padding:0 18px }
  .intro-screen{ padding:32px 0 64px }
  .intro-grid{ padding:0 18px }
  .intro-meta{ grid-template-columns:1fr 1fr; gap:0 }
  .intro-meta li:nth-child(3){ grid-column:1/-1; border-right:0; padding-left:0; border-top:1px solid var(--rule) }
  .intro-meta li:nth-child(2){ border-right:0 }
  .header-meta{ display:none }
  .site-header .wrap{ min-height:60px }
  .brand{ font-size:18px }
  .brand-mark{ font-size:15px }
  .progress-wrap{ top:60px; padding-left:18px; padding-right:18px }
  #ankietaForm{ padding:0 18px }
  .form-nav{ padding-left:18px; padding-right:18px }
  .form-nav .btn{ padding:14px 18px; font-size:12px; letter-spacing:.12em }
  .form-nav .btn-ghost span{ display:none }
  .step-legend{ flex-direction:column; gap:6px }
  .step-intro{ padding-left:0 }
  .radio-grid,
  .radio-grid-3,
  .radio-grid-4,
  .radio-grid-tier{ grid-template-columns:1fr }
  .pct-list{ padding:18px }
  .pct-row{ grid-template-columns:1fr; gap:8px }
  .pct-row-export{ grid-template-columns:1fr }
  .pct-export{ grid-template-columns:1fr; gap:8px }
  .rating-list{ background:var(--paper) }
  .rating-row{ grid-template-columns:1fr; gap:8px; padding:14px 16px; align-items:flex-start }
  .rt-scale{ width:100%; justify-content:space-between }
  .rt-pill{ flex:1 }
  .row-num-with-vol,
  .row-num-with-reason{ grid-template-columns:24px 1fr; gap:8px 12px }
  .row-num-with-vol .rn-volume,
  .row-num-with-reason .rn-reason{ grid-column:2 }
  .site-footer .wrap{ flex-direction:column; gap:6px }
}

@media (max-width: 420px){
  .intro-title{ font-size:42px }
  .step-legend{ font-size:28px }
  .pct-summary{ flex-wrap:wrap; padding:14px 16px }
  .pct-hint{ width:100%; margin:6px 0 0 }
  .ic-num{ font-size:48px }
  .intro-card{ padding:36px 28px }
}

/* ---------- print ---------- */
@media print{
  .site-header, .site-footer, .form-nav, .progress-wrap, .intro-card{ display:none }
  .step{ display:block !important; page-break-inside:avoid }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}