/* ============================================================
   Sapiform hub — jen hubové specifikum nad brand kitem v2 (brand/forma.css).
   Žádný hex: jen var(--…), color-mix a rgba.
   ============================================================ */

.skip-link{position:absolute;left:var(--gutter);top:-80px;z-index:100;padding:12px 18px;border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent);font-weight:600;text-decoration:none}
.skip-link:focus{top:12px}

#rot{overflow-wrap:break-word}

/* karty: tři fakta */
.card__facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font:500 .82rem/1.45 var(--font-mono);color:var(--card-fg2)}
.card__facts li{display:flex;gap:8px}
.card__facts li::before{content:"–";flex:none}

/* Jak pracujeme */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.steps li{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--r);background:var(--card);box-shadow:0 10px 30px rgba(14,15,20,.05)}
.steps h3{font-size:1.3rem}
.steps p{color:var(--fg-2)}
.steps__n{font:500 .8rem var(--font-mono);letter-spacing:.14em;color:var(--accent)}

/* kontakt */
.cta__box{align-items:start;gap:var(--sp-6)}
.cta__direct{font-size:.98rem}
.cta__direct a{color:var(--on-accent);font-weight:600}
.form{gap:var(--sp-4)}
.form__fields{display:flex;flex-direction:column;gap:var(--sp-4)}
.form__row{display:flex;flex-direction:column;gap:var(--sp-2)}
.form__row label{font:600 .9rem var(--font-body)}
.form input:not([type="checkbox"]),.form select,.form textarea{width:100%;min-height:48px;padding:12px 16px;border-radius:var(--r-sm);border:0;background:var(--card);color:var(--fg);font:500 1rem var(--font-body)}
.form textarea{min-height:96px;resize:vertical}
.form input::placeholder{color:var(--muted)}
.form input:focus,.form select:focus,.form textarea:focus{box-shadow:none;outline-color:var(--on-accent)}
.form__row--check{display:grid;grid-template-columns:auto 1fr;align-items:start;column-gap:var(--sp-3);row-gap:var(--sp-2)}
.form__row--check input{appearance:none;-webkit-appearance:none;position:relative;width:24px;height:24px;min-height:0;margin:0;align-self:center;padding:0;border:2px solid var(--on-accent);border-radius:var(--sp-1);background:transparent;cursor:pointer}
.form__row--check input:checked{background:var(--on-accent)}
.form__row--check input::after{content:"";position:absolute;inset:0;background:var(--accent);clip-path:polygon(18% 52%,28% 42%,42% 56%,72% 24%,82% 34%,42% 76%);opacity:0}
.form__row--check input:checked::after{opacity:1}
.form__row--check input:focus-visible{outline:3px solid var(--on-accent);outline-offset:3px}
.form__row--check label{font-weight:500;min-height:44px;padding-block:var(--sp-2);cursor:pointer}
.form__row--check .form__error{grid-column:1/-1}
.form__error{min-height:0}
.form__error:empty{margin-top:calc(-1 * var(--sp-2))}
.form__error:not(:empty){align-self:flex-start;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-sm);background:var(--card);color:var(--accent);font:600 .85rem var(--font-body)}
.form__hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form .btn{background:var(--on-accent);color:var(--accent);margin-top:var(--sp-1)}
.form .btn[disabled]{opacity:.7;cursor:progress}
.form__status{font:500 .9rem var(--font-mono);min-height:1.4em;margin-top:var(--sp-2)}
.form__status--err::before{content:"! ";font-weight:800}
.form__check{display:none;width:56px;height:56px;fill:none;stroke:var(--on-accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.form__check path{stroke-dasharray:24;stroke-dashoffset:24;animation:formcheck .5s var(--ease) forwards}
@keyframes formcheck{to{stroke-dashoffset:0}}
.form.is-success .form__fields{display:none}
.form.is-success .form__check{display:block}
.form.is-success .form__status{font-size:1.1rem}

/* konstelace: spojnice Cautory má pro úzký viewport vlastní koncový bod (viz .node--cautora) */
.l-narrow,.l-mid{display:none}
@media (max-width:719.98px){
  .l-wide{display:none}
  .l-narrow{display:inline}
}
/* 1024-1099 px: dvousloupcové rozložení zmenší konstelaci, Cautora se na 86/46 dotýká hubu -> níž (y 66 %) */
@media (min-width:1024px) and (max-width:1099.98px){
  .l-wide{display:none}
  .l-mid{display:inline}
  .node--cautora{--y:66%}
}

/* patička */
.footer__in a.brand{font-size:1.1rem}
.footer__family{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.footer__copy{margin-top:16px;font:500 .8rem var(--font-mono)}

@media (max-width:1023.98px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .steps li{padding:20px}
}
@media (max-width:719.98px){
  .steps{grid-template-columns:1fr}
  .cta__box{padding:var(--sp-5)}
  /* konstelace: uzly SapiWeb a Cautora se na úzkém viewportu nesmí dotýkat okraje */
  .node--sapiweb{--x:24%}
  .node--cautora{--x:76%;--y:66%}
  .family{gap:0 16px}
  .family li{flex:0 0 calc(50% - 8px)}
}
@media (prefers-reduced-motion:reduce){
  .cta__box,.form__check path{transition:none;animation:none;stroke-dashoffset:0}
}